onkeypressとoninput両方の世界のベストを得る方法

Question

私はonkeypressを試したので、入力を使用してキーコードを取得する必要があります。しかし、私はまた、keypressイベントがトリガされたときに実際にはない値を更新する必要がありました。

それで、oninputを使ってみましたが、入力の更新値がそこにありますが、keyCodeは登録されません。

今私は両方のイベントを使用していますが、両方ともkeyCodeと更新されたinputを含むキャッチオールイベントがあるのだろうかと思っていました。

$("#test").on('keypress',() => { 
 
    console.log("keypress value: ", event.target.value); 
 
}); 
 
$("#test").on('input',() => { 
 
    console.log("input value: ", event.target.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="test" />

Answer 1

あなたはkeyupイベントを使用することができます。あなたがキーを入力すると、これはあなたにkeycodeとupdatedValue

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="test" />

の両方を与える、イベントを以下のこと

1. キーダウン発生します。これは、キーが押下されている登録されます。キーが入力されないようにしたい場合は、これをブロックします。
2. キーを押す：これは、保持されているキーを登録します。その値はkeyDownで設定され、keyUpで消去されます。
3. キーアップ：これは、キーを離してイベントチェーンが完了したときです。これは、値を更新するイベントです。

Answer 2

もう1つの重要な違いは、大文字または小文字にしようとすると、これとは異なることです。

$("#testKeyPress").on('keypress',() => { 
 
    $("#testKeyPress").val($("#testKeyPress").val().toUpperCase()); 
 
    
 
}); 
 
$("#testInput").on('input',() => { 
 
    $("#testInput").val($("#testInput").val().toUpperCase()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    INPUT TEST <input id="testInput" /> <br/> 
 
KEYPRESS <input id="testKeyPress"/>