Sweetalert: 连续打开两个Sweet Alert Modals后,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();
    }

也许它只是专注于先前的模式并重新注册其keydown和onclick吗?

help wanted

最有用的评论

为了在不更改库的情况下通过@jayquest实施修复,我使用了以下代码:

var previousWindowKeyDown = window.onkeydown;
swal({
标题:“您确定吗?”,
closeOnConfirm:否,
closeOnCancel:否
},函数(isConfirm){
window.onkeydown = previousWindowKeyDown;
如果(isConfirm){
swal('Deleted!','您的想象中的文件已被删除。','success');
}其他{
swal('Cancelled','您的虚构文件是安全的:)','error');
}
});

所有20条评论

从那个例子中,我看不到你说的是真的,
因为“ 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完美。 非常感谢您的分享。 我尝试了您的代码,它运行完美。 非常感谢!!

干杯,
尼尔

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

IvoPereira picture IvoPereira  ·  14评论

ramysa picture ramysa  ·  10评论

kspearrin picture kspearrin  ·  22评论

adhip94 picture adhip94  ·  8评论

stefanoschrs picture stefanoschrs  ·  9评论