第一次触发事件时，按键事件不记录输入值

Question

第一次触发 keypress 事件时，即使输入有值，它也会记录一个空输入值。第二次它记录该值，但与输入值相比落后了一次击键。您可以在下一个示例中检查此行为：

document.addEventListener('DOMContentLoaded', () =>
{
    const input = document.querySelector('input');

    input.addEventListener('keypress', e =>
    {
        console.log(e.target.value);
    });
});

<input type="text"/>

但是，即使我传入 0ms.

，下一个变通方法也能正常工作

document.addEventListener('DOMContentLoaded', () =>
{
    const input = document.querySelector('input');

    input.addEventListener('keypress', e =>
    {
        setTimeout(() => console.log(e.target.value), 0);
    });
});

<input type="text"/>

为什么会这样？

Answer 1

那是因为它在输入值更新之前被触发。您可以尝试使用 keyUp 而不是 keyPress。

Answer 2

当您第一次按 key 时，分配给输入的值在 keypress 时是 empty事件发生，然后字符被添加到输入中，但稍后。这同样适用于未来的keypress事件，你读到的input的值是input changes之前的前一个。此外，如果您在 MDN 上阅读，则会出现有关按键被删除的警告。因此，您可能想要监听 keyup 事件，如下例所示：

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

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

.as-console {background-color:black !important; color:lime;}

<input type="text" id="input">

Answer 3

keypress 事件不改变输入 value - 你读取了 'old' 值 - 当前密钥在 e.key

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input');
  input.addEventListener('keypress', e => {
    console.log('value',e.target.value);
    console.log('key',e.key);
  });
});

<input>

您可以使用 onkeyup 事件在 event.target.value

中获取当前值

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input');
  input.addEventListener('keyup', e => {
    console.log('value', e.target.value);
    console.log('key', e.key);
  });
});

<input>

输入值将在 setTimeout 函数执行之前更新（即使是 0 毫秒）- 关键字：js event loop

Answer 4

根据jQuery docs：

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

The keyup event is sent to an element when the user releases a key on the keyboard.

The oninput event it's an event that triggers whenever the input changes.

因此 keypress 将在值更改之前触发，请改用 keyup

关于setTimeout，当你将代码放在那个地方时，它将是异步函数（即使是0毫秒）。在javascript中，异步函数将在所有同步命令完成后执行

Answer 5

keyup 事件在释放按键时触发，这会产生一点延迟的感觉。我宁愿使用 keydown 事件，它与 OP 公开的行为相同。 （注意 keypress 事件现在是 deprecated）。

您可以将当前值与按下的键连接起来，而不是等待下一个价格变动（通过使用 setTimeout）：

document.addEventListener('DOMContentLoaded', () => {
  const input = document.getElementById('input');

  input.addEventListener('keydown', event => {
    console.log(event.target.value + event.key);
  });
});

<input type="text" id="input">

编辑： 在多尝试了这个解决方案之后，当在输入文本之间移动光标或到达 maxlength 时，它无法按预期工作，所以毕竟我最终使用了 OP 提出的解决方法 setTimeout 和超时 0

第一次触发事件时，按键事件不记录输入值

keypress event doesn't log input value first time event is fired

javascript

onkeypress

settimeout