textarea绑定keydown事件首次按键读取value值为空如何解决

问题原因 #

问题是keydown事件的触发时机导致的：keydown会在按键按下的瞬间触发，此时你按下的字符还没有被写入到textarea的value属性中，读取到的永远是上一次输入完成后的旧值。所以你首次输入字符时，读取到的是初始空值，输入"hello"时依次读到空、"h"、"he"、"hel"、"hell"，最终打印结果就缺了第一个字符。

解决方案 #

方案1：替换为input事件（最推荐） #

input事件会在textarea的内容实际更新后触发，覆盖所有内容修改场景（键盘输入、粘贴、剪切、拖拽输入等），不需要额外兼容处理，修改后的代码如下：

const editor = document.getElementById('editor');
editor.addEventListener('input', (event) => {
    let value = editor.value;
    console.log(value);
});

方案2：替换为keyup事件 #

如果你的业务逻辑只需要响应键盘输入，也可以用keyup事件，该事件在按键抬起、字符已经写入value后触发：

const editor = document.getElementById('editor');
editor.addEventListener('keyup', (event) => {
    let value = editor.value;
    console.log(value);
});

方案3：必须使用keydown时的兼容处理 #

如果业务逻辑需要在keydown阶段做拦截（比如阻止特定按键输入）同时需要拿到最新值，可以用setTimeout把读取value的逻辑延迟到浏览器更新完DOM属性后执行：

const editor = document.getElementById('editor');
editor.addEventListener('keydown', (event) => {
    setTimeout(() => {
        let value = editor.value;
        console.log(value);
    }, 0)
});

内容的提问来源于stack exchange，提问作者truongmleon