为什么模态弹出按space栏按？我该如何预防？

Question

我计划在 space 栏点击时执行操作。它确实发生了。

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

但是，当我按下 space 栏时，连同必须触发的 event/action，模态 load/shows 再次启动。为什么会这样？我试图阻止模态再次加载：

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

});

但是文档没有获得焦点，并且触发模态加载的按钮一直处于焦点中，直到我单击屏幕使文档重新获得焦点。我怎样才能防止模态在 space 栏按下时再次加载？

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

Answer 1

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

但一般来说，您可以通过从 jquery 事件处理函数返回 false 来表明您已经消耗了 space 条形键的任何副作用事件。

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

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

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

Answer 2

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

document.activeElement.blur();

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

示例 (Live):

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

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

Answer 3

这可能是由于默认焦点集中在可能导致此问题的元素上。试过 event.preventDefault(); ？

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

Answer 4

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

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

我在您发布的 jsFiddle 中试过这个并且它有效，space 栏不再打开模式。

为什么模态弹出按space栏按？我该如何预防？

Why does modal pop up pressing space bar press? How do I prevent it?

html

javascript

jquery

modal-dialog

twitter-bootstrap

示例 (Live):