Sweetalert: Tombol tab tidak berfungsi setelah membuka dua Mode Sweet Alert secara berurutan

Dibuat pada 15 Okt 2014  ·  20Komentar  ·  Sumber: t4t5/sweetalert

Halo,

Tampaknya ketika dialog SweetAlert membuka dialog lain setelah selesai, tombol tab berhenti bekerja, semua penekanan tombol lainnya tidak masalah.

Anda dapat membuat ulang ini menggunakan contoh di http://tristanedwards.me/sweetalert.

Yang ini secara khusus:

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

Saya percaya ini menyalin penanganan keystroke dari modal sebelumnya, khususnya di fungsi closeModal (), bagian ini:

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

Mungkin itu hanya berfokus pada modal sebelumnya dan mendaftarkan kembali keydown dan onclick itu?

help wanted

Komentar yang paling membantu

Untuk menerapkan perbaikan dengan @jayquest tanpa mengubah perpustakaan, saya menggunakan kode berikut:

var beforeWindowKeyDown = window.onkeydown;
swal ({
title: 'Apakah Anda yakin?',
closeOnConfirm: false,
closeOnCancel: false
}, fungsi (isConfirm) {
window.onkeydown = beforeWindowKeyDown;
if (isConfirm) {
swal ('Dihapus!', 'File khayalan Anda telah dihapus.', 'Berhasil');
} lain {
swal ('Dibatalkan', 'File imajiner Anda aman :)', 'error');
}
});

Semua 20 komentar

Dari contoh itu saya tidak dapat benar-benar melihat bahwa apa yang Anda katakan itu benar,
Karena tombol 'tab' hanya berpindah antar tombol,
ketika saya mendapatkan modal kedua saya hanya memiliki satu tombol, jadi tidak peduli berapa banyak Anda akan menekan tombol tab itu akan selalu tetap pada satu tombol yang dimilikinya.

Maaf saya tidak menjelaskannya!

Ya itu tabbing IN model, tetapi setelah Anda menutup modal kedua, Anda kehilangan kemampuan menavigasi halaman web dengan tombol tab (Tidak ada modals di layar hanya halaman web).

Saya sudah mencoba memperbaikinya di jack126guy / sweetalert @ issue127 . Tampaknya berfungsi sejauh fokus kembali ke tombol di halaman.

Namun, ini mengungkapkan masalah lain: Anda masih tidak dapat menekan tombol lain, dan ketika Anda menekan Enter untuk menampilkan peringatan lagi, semuanya menjadi aneh.

Ya, saya mencoba memperbaiki yang serupa dengan Anda tetapi dengan variabel global jendela untuk memastikan itu adalah elemen dari situs web selain SweetAlert, itu memfokuskan elemen pada dokumen tetapi tombol Tab masih tidak berfungsi.

Apa yang tampaknya telah memperbaikinya untuk saat ini adalah menghapus stopEventPropagation (e) di klausa if (keycode == 9) dalam metode handleKeyDown . Tapi saya menduga ada efek samping lain dari ini ...

Saya akan menunjukkan komit tetapi saya melakukan beberapa perubahan lain ke perpustakaan juga yang mungkin tidak diinginkan orang lain.

Jadi jika ada yang menginginkan perbaikan sementara untuk bug ini, inilah repo yang saya buat dari proyek ini: https://github.com/heero-yuy/sweetalert.git

Ini berfungsi 100% untuk semua proyek saya sejauh ini tetapi saya belum mengujinya secara ekstensif untuk memastikan perubahan saya tidak merusak fungsionalitas lainnya.

saya memperbaikinya dengan memasukkan dua baris kode di atas pada awal fungsi sweetAlert atau swal pada baris 215, saya tidak tahu apakah ini solusi terbaik, tetapi bekerja untuk saya.

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

sweetAlert = swal = function() {

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

: +1:. Ini harus mendapat prioritas.

Perbaikan oleh @jayquest tampaknya berhasil.

Untuk menerapkan perbaikan dengan @jayquest tanpa mengubah perpustakaan, saya menggunakan kode berikut:

var beforeWindowKeyDown = window.onkeydown;
swal ({
title: 'Apakah Anda yakin?',
closeOnConfirm: false,
closeOnCancel: false
}, fungsi (isConfirm) {
window.onkeydown = beforeWindowKeyDown;
if (isConfirm) {
swal ('Dihapus!', 'File khayalan Anda telah dihapus.', 'Berhasil');
} lain {
swal ('Dibatalkan', 'File imajiner Anda aman :)', 'error');
}
});

Untuk memperluas perbaikan @amoralidad , Anda dapat menggunakan ini untuk menyertakan hanya sekali setelah Anda menyertakan pustaka peringatan manis dalam proyek Anda dan itu akan menghiasi layanan swal sehingga kode dan pustaka Anda tetap tidak terhalang (tanpa mengkodekan perbaikan di atas dalam setiap panggilan ) sampai perbaikan permanen dilakukan.

(function (){

    var _swal = window.swal;

    window.swal = function(){

        var previousWindowKeyDown = window.onkeydown;

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

        window.onkeydown = previousWindowKeyDown;

    };

})();

Saya dapat mengonfirmasi bug ini juga dan solusi di atas berfungsi dengan baik juga! : +1:

Yup, solusi dari @JustinWinthers berfungsi dengan baik!

namun, tampaknya gagal menggunakan tombol escape dan enter dalam dialog

Solusi dari @amoralidad berhasil untuk saya. Terima kasih!

terima kasih @jayquest ... @ t4t5 tolong perbaiki ini di cabang utama!

Saya baru saja mengajukan permintaan tarik dengan solusi saya. https://github.com/t4t5/sweetalert/pull/547

@JustinWinthers , menggunakan kode Anda memecahkan type: 'input' . Saat mencoba mengklik tombol "Batal" untuk menutup dialog, dikatakan swal.showInputError is not a function .

Sebagai contoh, buka http://clubcare.no/dashboard dan ketuk Glemt passord (lupa kata sandi)

Menghapus fungsi Anda membuatnya berfungsi kembali. Ada gagasan tentang cara menyingkirkan perilaku ini? Terima kasih!

@jayquest Terima kasih telah memperbaiki masalah ini.

Halo,

Saya mencoba saran Anda untuk memperbaiki masalah tab ini setelah SweetAlert terbuka. Ini memperbaiki masalah, namun saya mulai mendapatkan kesalahan ini ketika saya mencoba menutup Sweetalert menggunakan swal.close(); ketika tombol cancel diklik:

swal.close is not a function

Ini mirip dengan apa yang dikatakan @EduardJS di atas. Apakah ada cara untuk membuatnya bekerja? Saya merasa kami sudah sangat dekat tetapi karena kesalahan ini, saya harus menghapus kode yang Anda sarankan. Segala bantuan akan sangat membantu.

Bersulang,
Neel.

Solusi paling sederhana yang mungkin berdasarkan solusi @JustinWinthers yang dapat saya temukan (tanpa memodifikasi pustaka), adalah dengan hanya menghubungkan ke fungsi swal.close dan mengatur window.onkeydown ke window.onkeydown event handler:

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

atau dalam kasus saya bahkan lebih sederhana:

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

Dengan solusi ini, sekarang juga dimungkinkan untuk menggunakan tombol Enter dan Escape dalam dialog.

Pesan kesalahan yang disebutkan oleh @ Mr-Anonymous dan @EduardJS juga tidak lagi terjadi.

@kosong Terima kasih banyak telah membagikannya. Saya mencoba kode Anda dan berfungsi dengan sempurna. Terima kasih banyak!!

Bersulang,
Neel.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

mouro001 picture mouro001  ·  3Komentar

sastrahost picture sastrahost  ·  5Komentar

daftspunk picture daftspunk  ·  4Komentar

rafatux picture rafatux  ·  5Komentar

krishnamraju picture krishnamraju  ·  3Komentar