输入框输入内容时控制台获取旧值，如何获取实时值？

你的问题出在事件触发时机上：keypress事件是在字符插入到输入框之前触发的，所以此时打印的e.target.value自然是输入前的旧值。

下面是几种可行的解决方案：

方法1：使用input事件（推荐） #

input事件会在输入框内容发生任何变化时触发（包括键盘输入、粘贴、拖拽输入等），能稳定获取到最新值：

const input1 = document.querySelector('#a')

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

对应的HTML：

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

方法2：使用keyup事件 #

keyup事件在按键抬起后触发，此时字符已经插入输入框，能拿到最新值，但它只响应键盘操作，无法捕获粘贴等非键盘输入场景：

const input1 = document.querySelector('#a')

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

方法3：延迟获取（不推荐） #

如果一定要保留keypress事件，可以通过setTimeout延迟执行获取操作，利用事件循环让字符先插入输入框：

const input1 = document.querySelector('#a')

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

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