1

div を入力する入力テキスト ボックスでスクリプトを実行しようとしています。スニペットは次のようになります。

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

ここでの問題は、1 文字の遅延があることです。つまり、「a」と入力しても何も表示されません。「b」と入力すると、前の「a」が表示されます。onkeydown を onkeyup に置き換えてみましたが、まだ少しラグがあります。ページを更新したり、入力ボックスへのフォーカスを失ったりすることなく、リアルタイムで div を入力テキスト ボックスと一致させるにはどうすればよいですか?

ご覧いただきありがとうございます。

4

1 に答える 1

2

これはonkeydown、キーがその値を入力に追加する前にトリガーするためです。onkeyup代わりに使用してください。それはあなたが求めている方法で機能します。

編集：質問を編集した場合、速度を逃したかどうかはわかりませんが、表示されている遅延は避けられません。あなたが得ようとしているのと同じくらい「リアルタイム」に近いです。フィドルでチェックすると0.5秒未満で、それほど悪くはありません

Edit2 : 好奇心を満たすために、ノックアウトを介して div テキストを更新する 1 つの入力と、スクリプトを介して別の div を使用して、KnockoutJS のデータバインディングに対してパフォーマンスをチェックしました。性能は同じです。ノックアウトが目立ったオーバーヘッドをもたらさなかったことに、私は実際に少し驚きました。ここにフィドルがあります

于 2012-06-06T00:12:22.103 に答える