如何使用Javascript來填充輸入文本框中的輸入div？

我正試圖在填充div的輸入文本框上運行腳本。該片段是像這樣：如何使用Javascript來填充輸入文本框中的輸入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實時匹配輸入文本框，而無需刷新頁面和/或在輸入框上丟失焦點？

感謝您的期待。

來源

2012-06-06 Freakishly

「我試着用onkeyup替換onkeydown，而且還有一點滯後」 - 歡迎使用web編程。 onKeyDown的速度與您將要獲得的一樣快......沒有「beforeTheUserPressesAKey」事件。 – machineghost

這是因爲onkeydown在密鑰將其值添加到輸入之前觸發。改爲使用onkeyup。它會以你以後的方式工作。

編輯：不知道如果我錯過了速度的事情，如果你編輯你的問題，但你看到的滯後是不可避免的。它與您即將獲得的「實時」非常接近。這真的甚至沒有那麼糟糕，不到半秒鐘當我檢查它在a fiddle

EDIT2：只是爲了滿足我的好奇心，我覈對KnockoutJS的數據綁定的性能，與一個輸入更新通過敲除一個div文本，另一個div通過你的腳本。性能是相同的。我其實有點驚訝淘汰賽沒有引入任何明顯的開銷。這裏是the fiddle

來源

2012-06-06 00:12:22 Tyrsius

如何使用Javascript來填充輸入文本框中的輸入div？

回答

相關問題