你好,
看来,当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();
}
也许它只是专注于先前的模式并重新注册其keydown和onclick吗?
从那个例子中,我看不到你说的是真的,
因为“ tab”键只是在按钮之间移动,
当我获得第二个模态时,我只有一个按钮,因此无论您按下标签按钮多少,它始终保持在它具有的单个按钮上。
抱歉,我不清楚!
是的,它在模型中进行了制表,但是在关闭第二个模态后,您将失去使用Tab键浏览网页的能力(屏幕上没有模态只是网页)。
我试图通过jack126guy / sweetalert @ issue127进行修复。 只要焦点返回到页面上的按钮,它似乎就可以工作了。
但是,它揭示了另一个问题:您仍然无法跳到另一个按钮,并且当您按Enter键再次显示警报时,事情变得很奇怪。
是的,我尝试对您进行类似的修复,但是使用window全局变量来确保它是SweetAlert以外的其他网站元素,它确实将元素集中在文档上,但是Tab键仍然无法使用。
目前似乎已解决的问题是在handleKeyDown方法的if( keycode == 9)子句中删除了stopEventPropagation(e) 。 但是我想这还有其他副作用...
我会向您展示一个提交,但是我对库做了一些其他更改,而其他人可能不想这样做。
因此,万一有人想要临时修复此错误,以下是我从该项目中获得的一个仓库: https :
到目前为止,它对我所有的项目都适用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({
标题:“您确定吗?”,
closeOnConfirm:否,
closeOnCancel:否
},函数(isConfirm){
window.onkeydown = previousWindowKeyDown;
如果(isConfirm){
swal('Deleted!','您的想象中的文件已被删除。','success');
}其他{
swal('Cancelled','您的虚构文件是安全的:)','error');
}
});
要扩展@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的解决方法工作正常!
但是,似乎可以使用转义键并在对话框中输入键
@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完美。 非常感谢您的分享。 我尝试了您的代码,它运行完美。 非常感谢!!
干杯,
尼尔
最有用的评论
为了在不更改库的情况下通过@jayquest实施修复,我使用了以下代码:
var previousWindowKeyDown = window.onkeydown;
swal({
标题:“您确定吗?”,
closeOnConfirm:否,
closeOnCancel:否
},函数(isConfirm){
window.onkeydown = previousWindowKeyDown;
如果(isConfirm){
swal('Deleted!','您的想象中的文件已被删除。','success');
}其他{
swal('Cancelled','您的虚构文件是安全的:)','error');
}
});