HTML元素上的Javascript onkeydown事件

Javascript onkeydown event on HTML element

本文关键字：onkeydown 事件 Javascript 元素 HTML      更新时间：2023-09-26

我正在尝试制作一个使用WASD移动WebGL（three.js）相机的应用程序。但是，当我使用时

onkeydown = function(e) { alert("a") }

并尝试在同一页面上键入文本框，它会触发侦听器。我把代码改成这样：

var container = document.getElementById("container");
container.onkeydown = function(e) { alert("a") }

但这并没有起作用，因为HTML内容还没有加载，所以我添加了jQuery:

var container;
$(function() {
  container = document.getElementById("container");
  container.onkeydown = function(e) { alert("a") }
});

现在，听众根本不起作用，那么有可能做到这一点吗？

您需要使用DOMContentLoaded事件将执行延迟到HTML加载之后。在纯JavaScript中，它看起来像这样：

document.addEventListener('DOMContentLoaded', function() {
    var container = document.getElementById('container');
    container.addEventListener('keydown', function(e) { alert("a") });
});

对于jQuery，它几乎相同，但略短：

$(document).ready(function() {
    var container = document.getElementById('container');
    $(container).keydown(function(e) { alert("a") });
});

（加上Oriol对tabindex的评价。）

为了使其工作，您的元素必须集中：

当元素以为焦点时，文档接收到的关键事件必须针对该元素。可能没有重点元素；当否元素是焦点，文档接收到的关键事件必须以身体元素为目标

然而，为了能够聚焦元素，它必须是可聚焦的：

如果满足以下所有条件，则元素是可聚焦的：

  • 元素的tabindex焦点标志已设置
  • 该元素正在被呈现，或者是表示嵌入内容的canvas元素的后代
  • 该元素不是惰性的
  • 元素未被禁用

通常，问题是缺少tabindex焦点标志。可以通过添加具有整数值的tabindex属性来设置添加。

一旦元素是可聚焦的，你就需要对其进行聚焦。有多种方法可以做到这一点，例如

  • 使用JavaScript，使用.focus()方法
  • 用鼠标点击（不取消mousedown事件）
  • 按tab键浏览可聚焦元素。如果使用非负tabindex，则元素最终将成为焦点

例如：

var container = document.getElementById("container");
container.onkeydown = function(e) { alert("Key detected") }
#container { border: 3px solid red; padding: 10px; }
#container:focus { border-color: green; }
#container:after { content: "Now I'm not focused, so it won't work. Click me."; }
#container:focus:after { content: "Now I'm focused, so it will work. Press a key."; }
<div id="container" tabindex="-1"></div>

function myFunction() {
  alert("a");
}
<body>
  <table>
     <tr>
        <td>
           <input  type="text"  name="container" id="container" value=""  onkeydown="myFunction()">
       </td>
     </tr>
  </table>
</body>

相关文章：