Question

我正在尝试在填充div的输入文本框上运行脚本。代码片段如下：

<input type="text" id="control" value="" />
<div id="displaydiv"></div>
<script>
document.getElementById("control").onkeydown = function() {
document.getElementById("displaydiv").innerHTML = this.value;   
}
</script>

这里的问题是存在一个字符的滞后，即如果我输入“a”，则不显示任何字符。当我输入'b'时，前一个'a'出现，依此类推。我尝试用onkeyup替换onkeydown，但仍有一点滞后。如何让div实时匹配输入文本框，而不刷新页面和/或失去对输入框的关注？

感谢您的光临。

Answer 1

这是因为onkeydown在键将值添加到输入之前触发。请改用onkeyup。它将按照您的方式运作。

编辑：如果您编辑了问题，不确定我是否错过了速度，但您看到的滞后是不可避免的。它就像你将要获得的那样接近“实时”。当我在a fiddle

中查看它时，它甚至不是那么糟糕，不到半秒钟

Edit2 ：为了满足我的好奇心，我根据KnockoutJS的数据绑定检查了性能，一个输入通过knockout更新div文本，另一个div通过脚本更新。表现完全相同。我实际上有点惊讶，淘汰没有引入任何明显的开销。这是the fiddle

如何使用Javascript通过输入文本框中的输入填充div？

1 个答案: