Html上的键绑定

Key binding on Html

本文关键字：绑定 Html      更新时间：2023-09-26

如何将密钥W绑定到网页上的按钮

我试着用.键，但似乎不起作用。

这里的代码：

<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head> 
<body> 
    <div class="d-pad">
      <div id="d-up" class="button d up"></div>
      <div id="d-right" class="button d right"></div>
      <div id="d-down" class="button d down"></div>
      <div id="d-left" class="button d left"></div>
    </div>
<script>
 $(document).keypress(function(e){                     // keybiding 
    if (e.which == 87){
        $("#d-up").click(function(){alert('UP')});
    }
 });
</script>     
</body>
</html>

我试图将键W绑定到id为d-up的向上按钮，每当按下W时，都会有一个提示，说up。这似乎不起作用。我在这里做错什么了吗？

感谢

你没有说：

每当按下W时，显示一个警报

你说：

每当按下W时，都要进行设置，这样，如果用鼠标点击一个没有内容的div，就会显示一个警告

去掉点击处理程序。

 $(document).keypress(function(e){ 
    if (e.key == 87){
        document.body.style.backgroundColor = "black";
    }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

本演示中的注意事项：

  • 你需要关注结果才能看到效果
  • 我已经改用背景色，因为alert在stackoverflow片段中被沙盒化了
  • w与w不同

您正在创建一个可能永远不会发生的事件。试试这个：

$(document).keypress(function(e){
  if(e.shiftKey && e.keyCode === 87){ // capital W
    alert('UP');
  }
});

$(document).bind("keydown",function(e) {
        var originator = e.keyCode || e.which;
        if(originator == 87)
         alert('UP');
    });
相关文章：