4

入力コントロールのテキストが変更されるたびに、すぐに何かを更新する必要があります。しかし、これに適したイベントが見つからないようです。

  • onchange は、入力ボックスを離れたとき (つまり、タブを離すか、外側をクリックしたとき) にのみ起動します。

  • onkeypressは変更が行われる前に発生し、任意のキーを押したときに発生します (たとえば、テキストの変更を引き起こさないカーソルの左と右も)

  • onkeydown と onkeyup は、任意のキーでも起動します (Shift などのように、テキストの変更は発生しません)。

また、マウスで右クリックしてクリップボードから貼り付けても、これらのいずれも起動しないようです。または、JS 内から値を変更する場合 (つまり、別の場所から input.value = something を実行する場合)。

最小限の例: http://jsfiddle.net/nggAm/

私は何をすべきか？これを回避する方法の 1 つは (ほとんどの場合)、すべてのイベントを 1 つの汎用イベント ハンドラーに設定し、そこに値をキャッシュして、文字列が変更されたときにのみ実際の更新を行うことだと思います。でもこれはちょっとヤバい気がする。これを行う正しい方法は何ですか？

4

1 に答える 1

1

古いブラウザの場合、入力の onkeyup と onchange と onpaste を設定する必要があります。

しかし、新しいブラウザーには oninput があります。これは、すべてのブラウザーにあればいいのにと思うものです。

すべてのイベントを設定してから、oninput が発生した場合は oninput 以外のすべてを削除できます。

(ただし、IE9 では、バックスペースや文字の削除を行う場合に入力イベントを渡すのに問題があるため、キー イベントはそのブラウザーだけに残しておいてください。)

サンプル コード - すべてのイベントを 1 つのハンドラに転送し、oninput が発生した場合は削除する

F.text1.oninput= function(){
    F.text1.onpaste= F.text1.onchange= null;
    if(!document.documentMode) F.text1.onkeyup= null;
    F.text1.oninput= F.limiter;
    return F.limiter();
}
F.text1.onpaste= function(){
    setTimeout(F.limiter, 100);
}
F.text1.onkeyup= F.text1.onchange= F.limiter;
于 2012-04-25T07:24:43.147 に答える