jquery - jquery keyup 直到用户首先点击页面才被触发

Question

我正在尝试使用 jQuery 中的按键设置一些简单的页面导航。例如，如果用户按下左箭头键，我希望页面加载一些东西。

除了用户必须首先单击浏览器窗口以注册关键事件外，一切正常。

这是我正在使用的代码：

$(document).ready(function() {
  $(document.documentElement).live("keyup", function(event) {
      if (event.keyCode == 37) {//left arrow
        //do something here
      }
  });
});

这似乎是一个焦点问题，但我读过使用document.documentElement意味着我不必特别关注任何事情。

如果用户在页面上单击一次然后点击左箭头，它就会起作用。但是如果他们加载页面并点击左箭头而不点击它不会触发。

有任何解决这个问题的方法吗？

Answer 1

尝试使用.on()和不使用委托事件处理。

$(document).ready(function() {
   $(document).on("keyup", function(event) {
      if (event.which == 37) {//left arrow
        //do something here
      }
   });
});

或使用.keyup()如下方法：

$(document).ready(function() {
   $(document).keyup(function(event) {
      if (event.which == 37) {//left arrow
        //do something here
      }
   });
});

在这里你不需要live（不推荐）和document.documentElement.

Answer 2

您的页面上没有focus这就是您need to click在页面上的原因。将重点放在某些控件上，然后它将起作用。在这种情况下，live 不会造成任何麻烦，而是开始使用on，因为 live 已被弃用。

我通过状态设置焦点$('#txt1').focus();评论这个语句，你会注意到你必须点击页面来获取 keyup 事件。

现场演示

$(document).ready(function() {
  $('#txt1').focus();  //This is the statement that puts focus on page
  $(document.documentElement).live("keyup", function(event) {


      if (event.keyCode == 37) {//left arrow
        //do something here
          alert("");
      }
  });
});​

Answer 3

-.live()函数已弃用。试试这个：

$(document).ready(function() {
  $('body').on("keyup", function(event) {
      if (event.keyCode == 37) {//left arrow
        //do something here
      }
  });
});

Answer 4

无需使用已弃用的livenor on，因为您还拥有该文档。

此外，无需使用document.documentElement.

简单地做

$(document).keydown(function(){
}); 

这很好用，不需要点击。