1

Web サイトに 2 つ (またはそれ以上) の同一の HTML フォームを配置したいと考えています。
たとえば、1 つはページの上部にあり、もう 1 つはページの下部にあります。
私が望むのは、彼らがいつでもまったく同じコンテンツを持つことです。ユーザーがそのうちの 1 つの値を変更すると、残りのすべてが更新されます。javascript /イベント
よりも同期するより良い方法はありますか? 要素がフォーカスを失った後にのみ発生します。も完璧ではありません。長いテキストのコピーで大量の CPU を浪費し、とイベントの間で要素がフォーカスを失った場合は起動しません。onchangeonkeyup
onchange
onkeyuponkeydownonkeyup

4

1 に答える 1

2

更新: HTML5 にはこれに適したイベントがあることを知りましたoninputが、もちろん、古いブラウザーでは機能しません。、、および右クリック メニューからoninputのテキストの変更を検出します。したがって、ブラウザがサポートしているかどうかを確認し(たとえば、ここで推奨されている機能を使用して)、サポートしていない場合は以下の方法に戻るのが最善の方法です。古いバージョンの IE では、をシミュレートするために使用できます。PasteCutDeleteoninputonpropertychangeoninput

KnockoutJS がこれを達成する方法に基づいて、回答を変更することにしました。Knockout ドキュメントのこのページから:

"afterkeydown" - ユーザーが文字の入力を開始するとすぐにビュー モデルを更新します。これは、ブラウザのキーダウン イベントをキャッチし、イベントを非同期に処理することで機能します。

これらのオプションのうち、ビュー モデルをリアルタイムで更新し続けたい場合は、"afterkeydown" が最適です。

setTimeout時間値ゼロを使用して非同期動作を実現します。それ以外は、通常のkeydownイベント ハンドラーと同じように見えます。

jQuery を使用した簡単な例を次に示します。これは、Knockout の「afterkeydown」イベントと同等に動作すると考えられます。

$('#email').keydown(function() {
    setTimeout( $.proxy(handler, this), 0);
});

function handler() {
    console.log( this.value );
}

注: これは、右クリックの貼り付けイベントとドラッグ アンド ドロップ イベントをキャッチしません。これらのイベントのテキストも更新したい場合は、keydown と同じ方法でリッスンするだけです。

$('#email').on('keydown paste drop', function() {
    setTimeout( $.proxy(handler, this), 0);
});

のようkeydownにpaste、テキストの最新の値で更新するにはdropも必要です。setTimeout

元の答え:

onkeyupおそらく進むべき道ですが、キーダウンとキーアップの間で要素がフォーカスを失った場合、発火しないことについて良い点を挙げます。this answerに基づいて、解決策はコンテナ要素（または本体、この場合はおそらくそれを<form>要素にバインドするのが最も理にかなっていますが）のキーアップイベントをリッスンすることだと確信しています.

貼り付け時の CPU 使用率については、一定の時間 (たとえば 50 ミリ秒) が経過しない限り、イベントをキャンセルしてみることができます...うまくいけば、それで十分です。そうでない場合は、人気のある双方向データ バインディング フレームワークのいくつかがこれをどのように処理するかを調べることができます...私が見たもののほとんどはonkeyup.

于 2013-02-09T05:58:29.617 に答える