文本显示延迟

Question

我希望我立即在文本字段中输入的文本显示在div中:

function func() {
  document.getElementById("query").innerHTML = document.getElementById("keyword").value;
}
window.onload = function() {
  keyword.onkeydown = function(e) {
    func();
  }
}

<input type="text" id="keyword" size="40">
<div id="query"></div>

它的工作原理,唯一的问题是,它会延迟显示.

所以,如果我输入"abc",它只显示"ab".我需要输入另一个字符,例如"abcd",以便显示"abc".
最后一个角色总是丢失.

在这里你可以尝试一下:http://jsfiddle.net/285cz0np/

Answer 1

该事件正在被解雇onkeydown.由于input元素的值尚未更改,因此您没有看到结果.

您可以将其更改为onkeyup:( 更新示例).或者您可以在调用函数之前设置延迟.

或者,您也可以听取此input事件:

这里的例子

document.getElementById("keyword").addEventListener('input', function (e) {
    document.getElementById("query").textContent = e.target.value;
});

Answer 2

问题是因为输入文本值,在释放密钥之前不会更改.通过使用setTimeout你让浏览器更新值,然后再运行你的函数(func)

我建议不要改变onkeyup,因为你想要onkeydown,这个解决方案仍然可以使用该onkeydown事件

keyword.onkeydown = function (e) {
        setTimeout(func,0)
    }

更新示例jsFiddle:http://jsfiddle.net/285cz0np/1/

我建议你换成input活动.例如,如果用户从剪贴板粘贴(仅使用鼠标),则不会触发您的事件.

Answer 3

这是因为触发该函数的事件是onkeydown,因此当按下该键时,该函数将读取文本区域的值.此时它读取数据,按下的键尚未添加到实际值中.

一个简单的解决方法是将事件更改为,onkeyup因为当键处于up状态时,该键的值将被添加到该值.

window.onload = function () {
    keyword.onkeyup = function (e) {
        func();
    }
}