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

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

当您按下 key第一次，分配给 的值输入 是 empty当时keypress事件发生，然后字符被添加到输入中，但稍后。这同样适用于 future 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">