javascript - 按键事件未记录第一个键

Question

keypress 和 keydown 事件没有记录第一个 keypress/down 字符，而 keyup 事件工作正常，我需要在我的情况下使用 keypress 但它没有记录第一个字符

const demo = document.querySelector('.demo');
  const input = document.querySelector('.input');

  input.addEventListener('keypress', (e)=>{
    demo.innerHTML = input.value;
  });

<h1 class="demo"></h1>
<input type="text" class="input" placeholder="write something">

标签： javascript

Answer 1

文档：按键事件

已弃用

不再推荐此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。

改用HTMLElement: input 事件：

const demo = document.querySelector('.demo');
const input = document.querySelector('.input');

input.addEventListener('input', (e)=>{
  demo.innerHTML = input.value;
});

<h1 class="demo"></h1>
<input type="text" class="input" placeholder="write something">

如果要检测按下了哪个键，请使用Document: keyup event：

keyup释放键时触发该事件。

const demo = document.querySelector('.demo');
const input = document.querySelector('.input');

input.addEventListener('keyup', (e)=>{
  console.log(e.code);
  demo.innerHTML = input.value;
});

<h1 class="demo"></h1>
<input type="text" class="input" placeholder="write something">