为什么这几行js代码，第一次触发keypress事件，输出的值总是为按下前的值？

Question

想要每次在输入框输入文字，在控制台输出文本框内容。这是模仿百度搜索功能的一部分。 问题是：我输入第一个字母，控制台输出的是空，然后按下第二个字母，控制台输出确实第一个，总是少了最后一个字符。 <input type="text" name="search" id="search" maxlength="20" placeholder="请输入搜索内容"> var search = document.getElementById("search"); var keyword; search.onkeypress = function () { keyword = search.value; console.log(keyword) }

Answer 1

因为你keypress的同时，是先执行了keypress的事件函数（在console上显示value），再在<input>上显示你所按的键，因为这个执行顺序，每次console只能显示按键之前的value；

将js改成如下，增加了一个setTimeout(function(){},0)，这么写可以改变setTimeout里面执行语句的执行顺序，让它在文档稳定后再执行；

var search = document.getElementById("search");
var keyword;
search.onkeypress = function () {
    setTimeout(function () {
        keyword = search.value;
        console.log(keyword)
    }, 0)
}

你也可以试下将keypress改成keyup，也相当于改变了执行顺序