javascript - 入力テキスト要素にライブ変更イベントが必要です

Question

テキスト入力フィールドで変更イベントを処理したい。しかし、マウスが要素にフォーカスを失ったときにイベントがトリガーされます。入力時の変更イベントがトリガーされます。jQuery でライブ イベントを行うにはどうすればよいですか?

私は使用しました：

jQuery('#element').on('change',function(){
//do the stuff
});

Answer 1

イベントを使用できますkeyup()：

$('#someInput').keyup(function() {
    // Your code here
});

入力イベントもあります。

$('#someInput').on('input', function() { 
    // Your code here
});

frnhrが指摘したように、「input入力は変更を処理します。たとえば、フィールドに何かを貼り付けると、入力はトリガーされますが、キーアップは行われません。」

Answer 2

keyup、 、keydownおよびの 3 つのキー関連イベントから選択できますkeypress。次の文字列を入力するとしますabc。

$('#demo').on('keyup', function(e){
    console.log(this.value);
});

// a
// ab
// abc

JS フィドルのデモ。

$('#demo').on('keydown', function(e){
    console.log(this.value);
});

// 
// a
// ab

JS フィドルのデモ。

$('#demo').on('keypress', function(e){
    console.log(this.value);
});

// 
// a
// ab

JS フィドルのデモ。

違いは、出力が (大まかに) 示すように、要素の値が更新される前keyupにkeypress応答することです。したがって、押されたキーを知りたい場合は、ハンドラーとハンドラーの両方で (押されたキーの を返す jQuery の正規化された keypress イベント) を使用し、それをプロパティに追加する必要があります。また、正しい を返しますが、更新された を取得するためにそのキーを手動で追加する必要はありません。e.whichkeyCodekeypresskeyupvaluee.whichkeyup keyCodevalue

Answer 3

使用する必要がありますkeyUp()

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});