Sweetalert: Die Tabulatortaste funktioniert nicht, nachdem zwei Sweet Alert Modals hintereinander geöffnet wurden

Erstellt am 15. Okt. 2014  ·  20Kommentare  ·  Quelle: t4t5/sweetalert

Hallo,

Es scheint, dass, wenn das SweetAlert-Dialogfeld nach dem Öffnen ein weiteres öffnet, die Tabulatortaste nicht mehr funktioniert und alle anderen Tastenanschläge in Ordnung sind.

Sie können dies anhand des Beispiels unter http://tristanedwards.me/sweetalert neu erstellen

Dieser speziell:

swal({      title: "Are you sure?",   
            text: "Your will not be able to recover this imaginary file!",   
            type:  "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false }, 
            function(isConfirm){  
                 if (isConfirm) {     
                 swal("Deleted!", "Your imaginary file has been deleted.", "success");  
                 } else {     
                 swal("Cancelled", "Your imaginary file is safe :)", "error");   
                 } });

Ich glaube, es wird über die Tastenanschlag-Handhabung aus dem vorherigen Modal kopiert, insbesondere in der Funktion closeModal (), dieser Teil:

 // Reset the page to its previous state
    window.onkeydown = previousWindowKeyDown;
    document.onclick = previousDocumentClick;
    if (previousActiveElement) {
      previousActiveElement.focus();
    }

Vielleicht konzentriert es sich einfach auf das vorherige Modal und registriert seinen Keydown und Onclick zurück?

help wanted

Hilfreichster Kommentar

Um das Update von implementieren, ohne die Bibliothek zu ändern, habe ich den folgenden Code verwendet:

var previousWindowKeyDown = window.onkeydown;
swal ({
Titel: 'Bist du sicher?',
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Gelöscht!', 'Ihre imaginäre Datei wurde gelöscht.', 'Erfolg');
} else {
swal ('Abgebrochen', 'Ihre imaginäre Datei ist sicher :)', 'Fehler');
}}
});

Alle 20 Kommentare

An diesem Beispiel kann ich nicht wirklich erkennen, dass das, was Sie sagen, wahr ist.
Da sich die Tabulatortaste gerade zwischen den Schaltflächen bewegt,
Wenn ich das zweite Modal bekomme, habe ich nur eine Taste. Egal wie oft Sie die Tabulatortaste drücken, es bleibt immer auf der einzigen Taste, die es hat.

Entschuldigung, das habe ich nicht klargestellt!

Ja, es wird im Modell angezeigt, aber nachdem Sie das zweite Modal geschlossen haben, verlieren Sie die Fähigkeit, mit der Tabulatortaste auf der Webseite zu navigieren (keine Modalitäten auf dem Bildschirm, nur die Webseite).

Ich habe versucht, eine Lösung unter jack126guy / sweetalert @ issue127 zu finden . Es scheint insofern zu funktionieren, als der Fokus auf die Schaltfläche auf der Seite zurückkehrt.

Es zeigt jedoch ein anderes Problem: Sie können immer noch nicht zu einer anderen Schaltfläche wechseln, und wenn Sie die Eingabetaste drücken, um die Warnung erneut anzuzeigen, werden die Dinge merkwürdig.

Ja, ich habe versucht, eine ähnliche Korrektur wie bei Ihnen vorzunehmen, aber mit einer globalen Fenstervariablen, um sicherzustellen, dass es sich um ein anderes Element der Website als SweetAlert handelt, wird das Element zwar auf das Dokument fokussiert, aber die Tabulatortaste funktioniert immer noch nicht.

Was es vorerst behoben zu haben scheint, ist das Entfernen der if (keycode == 9) -Klausel in der handleKeyDown- Methode. Aber ich vermute, es gibt noch andere Nebenwirkungen ...

Ich würde Ihnen ein Commit zeigen, aber ich habe auch einige andere Änderungen an der Bibliothek vorgenommen, die andere möglicherweise nicht möchten.

Für den Fall, dass jemand eine vorübergehende Lösung für diesen Fehler wünscht, hier ein Repo, das ich aus diesem Projekt herausgegabelt habe: https://github.com/heero-yuy/sweetalert.git

Es funktioniert bisher zu 100% für alle meine Projekte, aber ich habe es nicht ausführlich getestet, um sicherzustellen, dass meine Änderungen keine anderen Funktionen beeinträchtigen.

Ich habe es behoben, indem ich die beiden Codezeilen oben am Anfang der Funktion sweetAlert oder swal in der Zeile 215 eingefügt habe. Ich weiß nicht, ob es die beste Lösung ist, aber es funktioniert für mich.

/*
 * Global sweetAlert function
 */
var sweetAlert, swal;

sweetAlert = swal = function() {

    if(previousWindowKeyDown !== undefined && window.onkeydown !== previousWindowKeyDown)`
        window.onkeydown = previousWindowKeyDown;

: +1 :. Dies sollte eine gewisse Priorität erhalten.

Das Update von

Um das Update von implementieren, ohne die Bibliothek zu ändern, habe ich den folgenden Code verwendet:

var previousWindowKeyDown = window.onkeydown;
swal ({
Titel: 'Bist du sicher?',
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Gelöscht!', 'Ihre imaginäre Datei wurde gelöscht.', 'Erfolg');
} else {
swal ('Abgebrochen', 'Ihre imaginäre Datei ist sicher :)', 'Fehler');
}}
});

Um den Fix von

(function (){

    var _swal = window.swal;

    window.swal = function(){

        var previousWindowKeyDown = window.onkeydown;

        _swal.apply(this, Array.prototype.slice.call(arguments, 0));

        window.onkeydown = previousWindowKeyDown;

    };

})();

Ich kann diesen Fehler auch bestätigen und die obige Problemumgehung funktioniert auch gut! : +1:

Ja, die Problemumgehung von einwandfrei !

Es scheint jedoch mit Escape und Eingabe von Tasten im Dialogfeld zu funktionieren

Die Problemumgehung von

danke @jayquest ... @ t4t5 bitte

Ich habe gerade eine Pull-Anfrage mit meiner Lösung eingereicht. https://github.com/t4t5/sweetalert/pull/547

@JustinWinthers , type: 'input' gebrochen . Wenn Sie versuchen, auf die Schaltfläche "Abbrechen" zu klicken, um den Dialog zu schließen, wird swal.showInputError is not a function .

Gehen Sie zum Beispiel zu http://clubcare.no/dashboard und tippen Sie auf Glemt passord (Passwort vergessen)

Wenn Sie Ihre Funktion entfernen, funktioniert sie wieder. Irgendwelche Ideen, wie man dieses Verhalten loswird? Vielen Dank!

@ jayquest Vielen Dank, dass Sie dieses Problem

Hallo @JustinWinthers

Ich habe Ihren Vorschlag versucht, dieses Tabbing-Problem nach dem Öffnen von SweetAlert zu beheben. Das Problem wurde behoben, aber ich bekam diesen Fehler, als ich versuchte, den Sweetalert mit swal.close(); wenn auf die Schaltfläche cancel geklickt wurde:

swal.close is not a function

Dies ähnelt dem, was @EduardJS oben gesagt hat. Gibt es eine Möglichkeit, sie zum Laufen zu bringen? Ich glaube, wir sind uns so nahe gekommen, aber aufgrund dieses Fehlers musste ich Ihren vorgeschlagenen Code entfernen. Jede Hilfe wird großartig sein.

Prost,
Neel.

Die einfachste mögliche Lösung basierend auf der Problemumgehung von ändern ), besteht darin, nur die Funktion swal.close einzuhängen und window.onkeydown auf die vorherigen window.onkeydown Ereignishandler:

(function (){
    var close = window.swal.close;
    var previousWindowKeyDown = window.onkeydown;
    window.swal.close = function() {
        close();
        window.onkeydown = previousWindowKeyDown;
    };
})();

oder in meinem Fall noch einfacher:

(function (){
    var close = window.swal.close;
    window.swal.close = function() {
        close();
        window.onkeydown = null;
    };
})();

Mit dieser Problemumgehung ist es jetzt auch möglich, die Eingabetaste und die Escape-Taste im Dialogfeld zu verwenden.

Die von @ Mr-Anonymous und @EduardJS erwähnten Fehlermeldungen

@ Kosst Perfekt. Vielen Dank für das Teilen. Ich habe Ihren Code ausprobiert und er funktioniert perfekt. Ich danke dir sehr!!

Prost,
Neel.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

girishbr picture girishbr  ·  5Kommentare

mouro001 picture mouro001  ·  3Kommentare

yrshaikh picture yrshaikh  ·  4Kommentare

voodoo6 picture voodoo6  ·  4Kommentare

daftspunk picture daftspunk  ·  4Kommentare