为什么模态弹出按空格键按？我该如何预防？答案

【问题标题】：Why does modal pop up pressing space bar press? How do I prevent it?为什么模态弹出按空格键按？我该如何预防？
【发布时间】：2015-03-13 10:44:05
【问题描述】：

我有一个点击空格键的计划。它确实发生了。

// when space bar is pressed
do-something; // Applied on the $(document).keypress..

但是，当我按下空格键以及必须触发的事件/动作时，模态加载/再次出现。为什么会这样？我试图阻止模态再次加载：

$('#goal').on('hidden.bs.modal',function() {
            $(document).focus(); // Get the button that triggered modal
                                 // out of focus                            

});

但是文档没有获得焦点，并且触发模态加载的按钮保持焦点，直到我单击屏幕使文档恢复焦点。如何防止模态在空格键上再次加载？

我还尝试了触发模式的按钮上的blur() 功能。但它没有帮助吗？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap modal-dialog

【解决方案1】：

使用$(document).focus(); 将不起作用，因为document 不是可聚焦元素，它实际上根本不是元素。尝试使用document.activeElement 获取活动元素并使用blur 获取它。

document.activeElement.blur();

为此，您需要在模式关闭时监听事件hidden.bs.modal，因为 Bootstrap 会自动将焦点返回到关闭按钮。

示例（Live）：

$(document).on('hidden.bs.modal', function() {
    document.activeElement.blur();
});

或者，您可以将焦点设置到模型本身中的可聚焦元素（如果存在）。这可能会给用户带来最愉快的体验。

【讨论】：

没有帮助。这是jsfiddle：bootply.com/p9Bp7UurpP 模态关闭后，按钮保持焦点。
所以当按下空格键时，模态再次加载！我不希望这种情况发生。
我试过这个，但是用$('#myModal')而不是$(document)。你能解释一下区别吗？
@SuhailGupta 元素本身的事件回调在 Bootstrap 将焦点返回到元素之前运行。在树中将事件设置得更高可以避免这种情况。

【解决方案2】：

这可能是由于默认关注可能导致此问题的元素。试过 event.preventDefault(); ?

// when space bar is pressed
event.preventDefault();
do-something; // Applied on the $(document).keypress..

【讨论】：

是的。让它成为评论。

【解决方案3】：

如果没有看到更多代码或者更好的 jsfiddle 来演示您的问题，这有点难以回答。

但一般情况下，您可以通过从 jquery 事件处理函数返回 false 来指示您已使用该事件来防止空格键按键产生任何副作用。

所以（猜猜你的事件处理程序是什么样子的）

$('...').keypress( function(event) {
  if ( event.which == 32 ) {
    doSomething();
    return false;
  }
});

希望这会有所帮助。如果没有，请提供更多细节。

【讨论】：

这里是 jsfiddle：bootply.com/p9Bp7UurpP 当模式关闭时，按钮 launch demo model 保持焦点。按下空格键时，模态再次弹出
我无法返回false，因为我在空格键按下时定义了一个处理程序。它暂停/恢复文档上的视频。虽然处理程序工作正常，但也会在空格键上加载模式

【解决方案4】：

您可以通过这种方式避免按钮获得焦点：

$('#yourButtonId').focus(function(){
  $(this).blur();
});

我在您发布的 jsFiddle 中尝试了这个，它可以工作，空格键不再打开模式。

【讨论】：