Sweetalert: 2つのSweetAlert Modalを続けて開いた後、Tabキーが機能しない

作成日 2014年10月15日  ·  20コメント  ·  ソース: t4t5/sweetalert

こんにちは、

完了後にSweetAlertダイアログが別のダイアログを開くと、Tabキーが機能しなくなり、他のすべてのキーストロークは問題ないようです。

http://tristanedwards.me/sweetalertの例を使用して、これを再作成でき

これは具体的に:

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");   
                 } });

以前のモーダル、特にcloseModal()関数、この部分からのキーストローク処理をコピーしていると思います。

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

おそらく、それは単に前のモーダルに焦点を合わせ、キーダウンとオンクリックを登録し直すだけですか?

help wanted

最も参考になるコメント

ライブラリを変更せずに@jayquestによる修正を実装するために、次のコードを使用しました。

var previousWindowKeyDown = window.onkeydown;
swal({
タイトル:「よろしいですか?」、
closeOnConfirm:false、
closeOnCancel:false
}、関数(isConfirm){
window.onkeydown = previousWindowKeyDown;
if(isConfirm){
swal( 'Deleted!'、 '架空のファイルが削除されました。'、 'success');
} そうしないと {
swal( 'キャンセル済み'、 '架空のファイルは安全です:)'、 'エラー');
}
});

全てのコメント20件

その例から、あなたが言っていることが真実であることが本当にわかりません、
'tab'キーがボタン間を移動しているだけなので、
2番目のモーダルを取得したとき、ボタンは1つしかないので、タブボタンをいくら押しても、ボタンは1つだけです。

申し訳ありませんが、はっきりしませんでした。

はい、モデル内でタブ移動していますが、2番目のモーダルを閉じると、タブキーでWebページをナビゲートする機能が失われます(画面上にモーダルはなく、Webページのみ)。

jack126guy / sweetalert @ issue127で修正を試みました。 フォーカスがページのボタンに戻る限り、機能しているようです。

ただし、別の問題が明らかになります。それでも別のボタンにタブで移動できず、Enterキーを押してアラートを再度表示すると、状況がおかしくなります。

はい、私はあなたと同様の修正を試みましたが、ウィンドウグローバル変数を使用して、SweetAlert以外のWebサイトの要素であることを確認しました。要素はドキュメントにフォーカスされますが、Tabキーはまだ機能しません。

今のところ修正されているように見えるのは、 handleKeyDownメソッドのif(keycode == 9)句のstopEventPropagation(e)を削除することです。 しかし、これには他にも副作用があると思います...

コミットを表示しますが、他の人が望まないかもしれない他の変更もライブラリに加えました。

したがって、誰かがこのバグの一時的な修正を望んでいる場合に備えて、このプロジェクトからフォークしたリポジトリがあります//github.com/heero-yuy/sweetalert.git

これまでのところ、すべてのプロジェクトで100%動作しますが、変更によって他の機能が損なわれないことを確認するために、広範囲にテストしたことはありません。

関数sweetAlertの先頭に上記の2行のコードを挿入するか、215行目にswalを挿入するように修正しました。これが最善の解決策かどうかはわかりませんが、うまく機能しています。

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

sweetAlert = swal = function() {

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

:+1:。 これにはいくつかの優先順位が必要です。

@jayquestによる修正は

ライブラリを変更せずに@jayquestによる修正を実装するために、次のコードを使用しました。

var previousWindowKeyDown = window.onkeydown;
swal({
タイトル:「よろしいですか?」、
closeOnConfirm:false、
closeOnCancel:false
}、関数(isConfirm){
window.onkeydown = previousWindowKeyDown;
if(isConfirm){
swal( 'Deleted!'、 '架空のファイルが削除されました。'、 'success');
} そうしないと {
swal( 'キャンセル済み'、 '架空のファイルは安全です:)'、 'エラー');
}
});

@amoralidadの修正を拡張するには、これを使用して、プロジェクトにスイートアラートライブラリを含めた後に1回だけ含めることができます。これにより、swalサービスが装飾され、コードとライブラリが妨げられないようになります(すべての呼び出しで上記の修正をコーディングする必要はありません)。 )恒久的な修正が行われるまで。

(function (){

    var _swal = window.swal;

    window.swal = function(){

        var previousWindowKeyDown = window.onkeydown;

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

        window.onkeydown = previousWindowKeyDown;

    };

})();

このバグも確認でき、上記の回避策もうまく機能します! :+1:

はい正常に機能します!

ただし、ダイアログでエスケープキーとエンターキーを使用してf-upするようです

@amoralidadの回避策は私のために働いた。 ありがとう!

ありがとう@jayquest ... @ t4t5マスターブランチでこれを修正してください!

ソリューションとともにプルリクエストを送信しました。 https://github.com/t4t5/sweetalert/pull/547

@JustinWinthers 、コードを使用するとtype: 'input'壊れます。 「キャンセル」ボタンをクリックしてダイアログを閉じようとすると、 swal.showInputError is not a functionます。

たとえば、に行くhttp://clubcare.no/dashboard上のタップGlemt passord (パスワードを忘れました)

関数を削除すると、再び機能します。 この動作を取り除く方法についてのアイデアはありますか? ありがとうございました!

@jayquestこの問題を修正していただきありがとうございます。

こんにちは@JustinWinthers

SweetAlertが開いた後、このタブの問題を修正するための提案を試みました。 問題は修正されましたが、 cancelボタンがクリックされたときにswal.close();を使用してSweetalertを閉じようとすると、このエラーが発生し始めました。

swal.close is not a function

これは、 @ EduardJSが上で言ったことと似ています。 それらを機能させる方法はありますか? 近づいたように感じますが、このエラーのため、提案されたコードを削除する必要がありました。 どんな助けでも素晴らしいでしょう。

乾杯、
ニール。

(ライブラリを変更せずに)見つけた@JustinWinthersの回避策に基づく最も簡単な解決策は、 swal.close関数にのみフックし、 window.onkeydownを前のwindow.onkeydownイベントハンドラー:

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

または私の場合はさらに簡単です:

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

この回避策により、ダイアログでEnterキーとEscapeキーを使用することもできるようになりました。

@ Mr-Anonymousおよび@EduardJSによって言及されたエラーメッセージも発生しなくなりました。

@kosstパーフェクト。 それを共有していただきありがとうございます。 私はあなたのコードを試しました、そしてそれは完璧に働きます。 どうもありがとうございます!!

乾杯、
ニール。

このページは役に立ちましたか?
0 / 5 - 0 評価