Здравствуйте,
Кажется, что когда диалоговое окно 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?
Из этого примера я не могу понять, что вы говорите правду,
Потому что клавиша табуляции просто перемещается между кнопками,
когда я получаю второе модальное окно, у меня есть только одна кнопка, поэтому независимо от того, сколько вы будете нажимать на кнопку вкладки, она всегда будет оставаться на той единственной кнопке, которая у него есть.
Извините, я не дал этого ясно!
Да, это табуляция В модели, но после закрытия второго модального окна вы теряете возможность перемещаться по веб-странице с помощью клавиши табуляции (на экране нет модальных окон, только веб-страница).
Я попытался исправить это на странице 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 Идеально. Большое вам спасибо за то, что поделились этим. Я попробовал ваш код, и он отлично работает. Огромное спасибо!!
Привет,
Нил.
Самый полезный комментарий
Чтобы реализовать исправление @jayquest без изменения библиотеки, я использовал следующий код:
var previousWindowKeyDown = window.onkeydown;
swal ({
title: 'Вы уверены?',
closeOnConfirm: ложь,
closeOnCancel: false
}, function (isConfirm) {
window.onkeydown = previousWindowKeyDown;
if (isConfirm) {
swal ('Deleted!', 'Ваш воображаемый файл удален.', 'success');
} else {
swal ('Отменено', 'Ваш воображаемый файл в безопасности :)', 'ошибка');
}
});