如何使用 Javascript 确定用户在网页上的输入位置并做出相应反应

Question

我是 javascript 的新手，正在为具有文本输入部分的网页编写一个简单的小书签。基本上我需要的是一种执行以下命令的方法-


if ( ! (text_section).onkeydown ) { 

     do whatever

}

我需要在用户在输入字段中键入时忽略按键事件，否则只要用户按下某个键就会触发整个页面的按键事件。我知道 onkeydown 是一个事件 listener/handler 我只是想更准确地解释我需要做什么。

Answer 1

您应该向目标元素添加一个事件侦听器：

targetElement.addEventListener('keydown', (e) => {
 // do something
});

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

也可以使用onkeydown 属性:

targetElement.onkeydown = (e) => {
  // do something
}

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeydown

Answer 2

为您的文本部分使用 id，例如“myTextSection”。将 addEventListener 应用于整个 document。如果 target 是除文本字段之外的任何其他内容，do whatever:

document.addEventListener("keydown", (event) => {
    if(event.target !== document.getElementById("myTextSection")){
         //do whatever;
    }
});

请注意，此行为可能会刺激使用键盘导航的用户（例如 tab 和 space 键) 通过您的页面。因此，您可能想要添加另一个 if 语句来检查 event.keyCode 是否为字母数字。在这种情况下，keyCode 在范围

内

[47-58]（0-9），
[64-91]（对于 A-Z）或
[96-123]（对于 a-z）

如何使用 Javascript 确定用户在网页上的输入位置并做出相应反应

How to use Javascript to determine where a user is typing on webpage and react accordingly

javascript

bookmarklet