Question

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

一切正常，但用户必须先点击浏览器窗口才能注册关键事件。

这是我正在使用的代码：

$(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();设置焦点评论此声明，您将注意到您必须单击该页面以获取键盘事件。

<强> Live Demo

$(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

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

此外，无需使用document.documentElement。

简单地做

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

效果很好，无需点击。

在用户首先单击页面之前，jquery keyup不会被触发

4 个答案: