jQueryキーボードイベントのkeydownとkeypressの違いを詳しく解説

キーボードイベントは、キーボードが押されると、keydown -> keypress -> keyup の順序でトリガーされます。

1. テキストボックスにテキストが入力される前に keydown イベントと keypress イベントがトリガーされます。このとき、テキストボックス内のテキストが keydown イベントまたは keypress イベントで出力される場合、キーボードイベントの前のテキストがトリガーされます。そして、keyup イベントがトリガーされると、キーボード イベントの操作全体が完了し、キーボード イベントがトリガーされた後のテキストが取得されます

<input id="input" value="default" type="text" />
<script>var input = document.getElementById(&#39;input&#39;);
input.onkeydown = function() {
    console.log(&#39;onkeydown &#39; + this.value);
}
input.onkeypress = function() {
    console.log(&#39;onkeypress &#39; + this.value);
}
input.onkeyup = function() {
    console.log(&#39;onkeyup &#39; + this.value);
}</script>

テキスト ボックスに数値 1 を入力すると、出力結果は次のようになります。

onkeydown default
onkeypress default
onkeyup default1

2. キープレスイベントとキーダウンおよびキーアップの主な違い

1) 中国語入力方法のサポートが不十分であり、中国語入力に応答できません

2) システムファンクションキー (削除、バックスペースなど) に応答できません)

3) 前の 2 つの制限により、keyCode は keydown および keyup

3 と一致しません。キーを押している間、ブラウザのデフォルト 動作 が変更されているため、ブラウザのデフォルト イベントを keyup イベントで防ぐことはできません。完了、つまりテキストボックスにテキストが入力されます（まだ表示されていませんが）。このとき、preventDefault であっても return false であっても、テキストボックスにテキストを入力する動作を阻止することはできません。テキスト ボックスへのテキストの入力を防ぐには、キーダウンまたはキー押下中にブロックする必要があります。テキスト ボックスはキーダウン イベントおよびキー押下イベントで false を返します。テキスト ボックスは、keyup イベントでテキストを入力できません。 input text

4. textInput イベント

テキスト ボックスのキーボード応答イベントも、トリガーの順序: keydown -> keypress ->textInput -> DOM3 でサポートされています。 keypress との主な違いは、中国語の入力メソッドのサポートが追加されることです。もう 1 つの点は、textInput は編集可能なテキスト領域 (入力、テキストエリアなど) でのみトリガーできるのに対し、keypress はトリガーできることです。フォーカスを取得できる任意の

コントロール

によって実行できますが、textInput イベントのサポートは、現時点では safari と chrome でのみサポートされています。

以上がjQueryキーボードイベントのkeydownとkeypressの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。