jQueryキーボードイベントのkeydownとkeypressの違いを詳しく解説-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-06-27 13:54:04

オリジナル

2005 人が閲覧しました

キーボードイベントは、キーボードが押されると、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 サイトの他の関連記事を参照してください。