按键事件未记录第一个键

Question

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

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">

Answer 1

文档：按键事件

荒废的

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

改用 HTMLElement： 输入事件：

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">

如果要检测按下了哪个键，请使用文档：键控事件：

释放密钥时将触发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">

Answer 2

发生这种情况是因为keypress事件在字段更改其值之前触发，而keyup事件在字段更改其值之后触发

因此，当您检测到第一次按键时，当您更新demo元素时，输入的值仍然为空

Answer 3

这完全是由于keypress本身的行为。

keypress在更新input内容之前触发，因此当您检索input的值时，它仍然是空的。

相反，您可以使用keyup事件，该事件将按预期忠实触发：

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

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

或者，您可以使用在更新input之前触发keypress的知识，并通过向input追加e.key来模拟新值：

const demo = document.querySelector('.demo');
const input = document.querySelector('.input');
input.addEventListener('keypress', (e)=>{
demo.innerHTML = input.value + e.key;
});

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