时间戳

首页 > 解决方案 > 检测网页上的用户输入（按键或输入的事件处理）

javascript - 检测网页上的用户输入（按键或输入的事件处理）

问题描述

我正在创建一个基本的 chrome 扩展，当用户在网页上的任何位置键入时，它将发送消息提醒。但是，我不确定如何做到这一点，我考虑过使用keyUp和keyDown事件，但我只有在事件正在监视特定字段时才成功，而目标是检测用户可以键入的任何字段上的文本。

let timer,
        timeoutVal = 1000; // time it takes to wait for user to stop typing in ms

const status = document.getElementById('status');
const typer = document.getElementById('typer');

typer.addEventListener('keypress', handleKeyPress);
typer.addEventListener('keyup', handleKeyUp);

// when user is pressing down on keys, clear the timeout
function handleKeyPress(e) {
    window.clearTimeout(timer);
  status.innerHTML = 'Typing...';
}

// when the user has stopped pressing on keys, set the timeout
// if the user presses on keys before the timeout is reached, then this timeout is canceled
function handleKeyUp(e) {
    window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
    timer = window.setTimeout(() => {
    status.innerHTML = 'Done';
  }, timeoutVal);
}

达到预期结果的最佳方法是什么？

请记住，每当用户在网页上输入文本或用户在文本字段内单击开始输入时，我都试图让这个 chrome 扩展触发。

只有当用户在文本字段中没有文本并且文本字段未激活时，chrome 扩展才会消失（否则，如果文本字段中有文本，则保留扩展）。

标签： javascripthtmlcssevent-handling

解决方案

一种选择是将事件侦听器添加到 html 元素：

document.querySelector('html').addEventListener('keypress', () => {
  console.log('asd')
});

另一种选择是遍历用户可以输入的所有字段：

document.querySelectorAll('input').forEach(inp => {
  inp.addEventListener('keypress', () => {console.log('asd')})
});

推荐阅读