Sweetalert: Клавиша Tab не работает после открытия двух модальных окон Sweet Alert подряд

Созданный на 15 окт. 2014  ·  20Комментарии  ·  Источник: t4t5/sweetalert

Здравствуйте,

Кажется, что когда диалоговое окно SweetAlert открывает другое после его завершения, клавиша табуляции перестает работать, все остальные нажатия клавиш в порядке.

Вы можете воссоздать это, используя пример на 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();
    }

Возможно, он просто сосредоточился на предыдущем модальном окне и снова зарегистрировал его keydown и onclick?

help wanted

Самый полезный комментарий

Чтобы реализовать исправление @jayquest без изменения библиотеки, я использовал следующий код:

var previousWindowKeyDown = window.onkeydown;
swal ({
title: 'Вы уверены?',
closeOnConfirm: ложь,
closeOnCancel: false
}, function (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Deleted!', 'Ваш воображаемый файл удален.', 'success');
} else {
swal ('Отменено', 'Ваш воображаемый файл в безопасности :)', 'ошибка');
}
});

Все 20 Комментарий

Из этого примера я не могу понять, что вы говорите правду,
Потому что клавиша табуляции просто перемещается между кнопками,
когда я получаю второе модальное окно, у меня есть только одна кнопка, поэтому независимо от того, сколько вы будете нажимать на кнопку вкладки, она всегда будет оставаться на той единственной кнопке, которая у него есть.

Извините, я не дал этого ясно!

Да, это табуляция В модели, но после закрытия второго модального окна вы теряете возможность перемещаться по веб-странице с помощью клавиши табуляции (на экране нет модальных окон, только веб-страница).

Я попытался исправить это на странице jack126guy / sweetalert @ issue127 . Кажется, это работает, поскольку фокус возвращается к кнопке на странице.

Однако это выявляет другую проблему: вы по-прежнему не можете перейти к другой кнопке, и когда вы нажимаете Enter, чтобы снова показать предупреждение, все становится странно.

Да, я попытался исправить подобное с вашим, но с глобальной переменной окна, чтобы убедиться, что это элемент с веб-сайта, отличный от SweetAlert, он фокусирует элемент на документе, но клавиша Tab все еще не работает.

Кажется, что на данный момент это исправлено, так это удаление stopEventPropagation (e) в предложении if (keycode == 9) в методе handleKeyDown . Но я предполагаю, что у этого есть и другие побочные эффекты ...

Я бы показал вам фиксацию, но я сделал и другие изменения в библиотеке, которые другим могут не понадобиться.

Итак, если кому-то нужно временное исправление этой ошибки, вот репо, которое я создал из этого проекта: https://github.com/heero-yuy/sweetalert.git

Пока он работает на 100% для всех моих проектов, но я не тестировал его всесторонне, чтобы убедиться, что мои изменения не нарушают другие функции.

Я исправил это, вставив две строки кода выше в начале функции sweetAlert или swal в строке 215, я не знаю, лучшее ли это решение, но оно работает для меня.

/*
 * 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 ({
title: 'Вы уверены?',
closeOnConfirm: ложь,
closeOnCancel: false
}, function (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Deleted!', 'Ваш воображаемый файл удален.', 'success');
} else {
swal ('Отменено', 'Ваш воображаемый файл в безопасности :)', 'ошибка');
}
});

Чтобы расширить исправление @amoralidad , вы можете использовать его для включения только один раз после того, как вы включите библиотеку сладких предупреждений в свой проект, и она украсит службу 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:

Да, обходной путь @JustinWinthers работает нормально!

однако, похоже, что с помощью клавиш escape и ввода в диалоговом окне

Обходной путь @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. Это устранило проблему, однако я начал получать эту ошибку, когда пытаюсь закрыть Sweetalert с помощью swal.close(); при нажатии кнопки cancel :

swal.close is not a function

Это похоже на то, что @EduardJS сказал выше. Есть ли способ заставить их работать? Я чувствую, что мы подошли так близко, но из-за этой ошибки мне пришлось удалить предложенный вами код. Любая помощь будет отличной.

Привет,
Нил.

Самое простое возможное решение, основанное на обходном пути 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 рейтинги

Смежные вопросы

mateuszjarzewski picture mateuszjarzewski  ·  4Комментарии

daftspunk picture daftspunk  ·  4Комментарии

xgqfrms-GitHub picture xgqfrms-GitHub  ·  4Комментарии

fracz picture fracz  ·  4Комментарии

waldyrious picture waldyrious  ·  5Комментарии