jQuery 中的关键事件不工作

Question

我有一个 HTML 元素，我想在有人按键盘上的“1”后用特定内容填充它。我使用包含以下代码的外部 .js 文件：

$(document).ready(function() {
    $("#myid").html("Hello, 0111");
    $("#myid2").html("Lorem Ipsum");


    $(document).keyup(function (pressed_key) {
        if (pressed_key.key === "1") { 
            $("#myid").html("Button pressed");

            setTimeout(function () {
                $("#myid").html("Button not pressed");
            }, 1000);
        } 
    }

});

我的 HTML 身材是这样的：

<body>
    <div id="myid">0129</div>
    <div id="myid2"></div>
    <script src="js/libs/jquery/jquery.min.js"></script>
    <script src="js/script.js"></script>
</body>

代码无效，它输出 HTML 文档的内容。

但是，如果我注释掉 .keyup 函数，JavaScript 代码的其余部分将起作用并相应地更改 HTML 内容。

有什么想法吗？

Answer 1

问题是因为传递给 keyup 处理程序的参数是事件，而不是键入的字符的值。

要解决此问题，您可以使用 String.fromCharCode() 以及事件的 which 属性来获取角色，如下所示：

$(document).ready(function() {
  $("#myid").html("Hello, 0111");
  $("#myid2").html("Lorem Ipsum");

  $(document).keyup(function(e) {
    if (String.fromCharCode(e.which) === "1") {
      $("#myid").html("Button pressed");

      setTimeout(function() {
        $("#myid").html("Button not pressed");
      }, 1000);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid">0129</div>
<div id="myid2"></div>

Answer 2

您需要将事件传递给 keyup 处理程序，而不是所键入字符的值。

$(document).ready(function() {
  $("#myid").html("Hello, 0111");
  $("#myid2").html("Lorem Ipsum");

  $(document).keyup(function(event) {
    if (String.fromCharCode(event.which) === "1") {
      $("#myid").html("Button pressed");

      setTimeout(function(){
        $("#myid").html("Button not pressed");
      }, 1000);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid">0129</div>
<div id="myid2"></div>

jQuery 中的关键事件不工作

keyevent in jQuery not working

javascript

jquery

html

keyup