onKeyPress対。onKeyUpおよびonKeyDown

これら3つのイベントの違いは何ですか？グーグルで次のことがわかりました。

• onKeyDownユーザーがキーを押したときにイベントがトリガされます。
• onKeyUpユーザーがキーを離したときにイベントがトリガされます。
• onKeyPressイベントがトリガされたときにユーザプレス・リリース（キーonKeyDownが続きますonKeyUp）。

最初の2つは理解できましたがonKeyPress、同じではありませんonKeyUpか？キー（onKeyUp）を押さずに（）キーを離すことはできonKeyDownますか？

これは少し紛らわしいですが、誰かがこれを片付けてくれますか？

この回答で最初に使用されたアーカイブ済みリンクについては、ここを確認してください。

そのリンクから：

理論的にはonKeyDown、onKeyUpイベントとイベントはキーが押されたか離されたかをonKeyPress表し、イベントはタイプされた文字を表します。理論の実装は、すべてのブラウザーで同じというわけではありません。

KeyPress、KeyUpおよびにKeyDownそれぞれ類似しています：Click、MouseUp,およびMouseDown。

1. Down 最初に起こります
2. Press 2番目に発生（テキストが入力されたとき）
3. Up 最後に行われます（テキスト入力が完了したとき）。

例外はwebkitで、そこには追加のイベントがあります。

keydown
keypress
textInput     
keyup

以下は、イベントが発生したときに自分で確認できるスニペットです。

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

ここでの答えのほとんどは、実用的な問題よりも理論に焦点を当てており、少なくともFirefoxでは（43でテスト済み）、入力フィールド値に関連していてkeyup、いくつかの大きな違いがありkeypressます。

ユーザーが1空の入力要素に入力した場合：

1. 入力要素の値は、keypressハンドラー内の空の文字列（古い値）になります

2. 入力要素の値は1、keyupハンドラー内で（新しい値）になります。

これは、インライン検証や自動タブ移動など、現在の値ではなく、入力後の新しい値を知ることに依存する何かをしている場合に非常に重要です。

シナリオ：

1. ユーザーが12345input要素に入力します。
2. ユーザーがテキストを選択します 12345。
3. ユーザーが文字を入力しますA。

ときにkeypress、イベントが文字を入力した後に発射しA、テキストボックスには、今だけの文字が含まれていますA。

だが：

1. Field.val（）は12345です。
2. $ Field.val（）。lengthは 5
3. ユーザーの選択は空の文字列です（選択を上書きして何が削除されたかを判断できなくなります）。

それは、ブラウザ（Firefoxの43）は、ユーザーの選択を消去しているようですので、その後、発火するkeypressイベントを、そしてフィールドの内容を更新し、その後、発射しますkeyup。

onkeydownキーが押されたときに発生します（ショートカットのように、たとえば、でCtrl+A、Ctrl「押された」状態が保持されます。

onkeyup キーを離したときに発生します（修飾キーなどを含む）

onkeypressonkeydownおよびの組み合わせとしてonkeyup、またはキーボードの繰り返しに応じて（onkeyupが発生しない場合）発生します。（この繰り返し動作は私がテストしていないものです。テストする場合は、コメントを追加してください！）

textInput（webkitのみ）テキストが入力されたときに発生します（たとえば、Shift+A大文字の「A」を入力しますCtrl+Aが、テキストを選択してテキスト入力を入力しません。その場合、他のすべてのイベントが発生します）。

最初に、それらは異なる意味を持っています。

• KeyDown –キーが押されたとき
• keyUpイベント-プッシュボタンがされたときに解放され、後に入力/テキストエリアの値が更新される（これらのうちの一方のみ）
• KeyPress –それらの間とは、実際にはキーが押されて離されたことを意味しません（以下を参照）。

次に、一部のキーはこれらのイベントの一部を起動し、他のイベントは起動しません。例えば、

• KeyPressイベント無視はdelete、矢印は、PgUp/ PgDn、home/ end、ctrl、alt、shiftなどのKeyDownとkeyUpイベントは、（詳細を表示しませんがesc以下を）。
• あなたが経由でウィンドウを切り替えるとalt+ tabWindowsで、のみのためのKeyDown alt（およびKeyDownイベントをするために、ウィンドウの切り替えは、他のイベントの前に発生したため、火災tabクロム71、少なくとも、システムによって阻止され、私は考えます）。

また、event.keyCode（およびevent.which）は通常、KeyDownとKeyUpの値は同じですが、KeyPressの値は異なることに注意してください。私が作成した遊び場を試してください。ちなみに、私はかなりの奇妙なことに気づきました：Chromeでctrl+ を押しaてinput/ textareaが空の場合、KeyPressはevent.keyCode（およびevent.which）が1！（入力が空でない場合は、まったく起動しません）。

最後に、いくつかの実用的なものがあります：

• 矢印を処理するには、おそらくonKeyDownを使用する必要があります。ユーザーが↓を押したままにすると、KeyDownが数回起動します（KeyUpがボタンを離したときに一度だけ起動します）。また、場合によっては、KeyDownの伝達を簡単に防止できますが、KeyUpの伝達を防止できない（または簡単にできない）場合があります（たとえば、テキストフィールドに改行を追加せずにEnterで送信する場合）。
• 驚いたことに、たとえばでキーを押したときにtextarea、KeyPressとKeyDownの両方が複数回起動する場合（Chrome 71）、1回のキーリリースで複数回起動するイベントとKeyUpが必要な場合は、KeyDownを使用します。
• KeyDownは通常、ゲームのアクションに対する応答性を向上させる必要がある場合に適しています。
• esc通常はKeyDownを介して処理されます。KeyPressは起動せず、KeyUpの動作はブラウザーによってinputsとtextareasで異なります（主にフォーカスが失われるため）。
• テキスト領域の高さをコンテンツに合わせて調整したい場合は、おそらくonKeyDownではなく、onKeyPressを使用します（PS OK、この場合は実際にはonChangeを使用する方が良いです）。

私はプロジェクトで3つすべてを使用しましたが、残念ながら実用的なことを忘れている可能性があります。（注意してください：inputとchangeイベントもあります）

Jan Wolterによるこの記事は、私が出会った中で最高の作品です。リンクが切れている場合は、アーカイブされたコピーをここで見つけることができます。

すべてのブラウザのキーイベントを非常によく説明しています。

の keydownイベントは、キーが押されたとき、KeyPressイベントの直後に発生します。次に、キーが離されるとkeyupイベントが生成されます。

キーダウンとキープレスの違いを理解するには、文字とキーを区別すると便利です。キーは、コンピュータのキーボード上の物理的なボタンです。文字は、ボタンを押すことによって入力されたシンボルです。USキーボードでは、4キーを押しながらShift押すと、通常「ドル記号」の文字が生成されます。これは、必ずしも世界中のすべてのキーボードに当てはまるわけではありません。理論的には、KeyDownイベントとからkeyupイベントは、一方で、押されたり解放されたキーを表すキープレスイベントは、入力されている文字を表します。実際には、これは常に実装方法とは限りません。

しばらくの間、一部のブラウザは、keypressの直後にtextInputと呼ばれる追加のイベントを発生させました。DOM 3標準の初期のバージョンでは、これをkeypressイベントの代わりとして使用することを意図していましたが、概念全体が後で取り消されました。Webkitはバージョン525と533の間でこれをサポートし、IEはそれをサポートしていると聞いていますが、それを検出したことはありません。おそらく、WebkitがtextInputと呼ばれる必要があったためです。、IEがtextinputを呼び出すときにをでした。

すべてのブラウザでサポートされているinputというイベントもあり、textareaまたはinputフィールドに変更が加えられた直後に発生します。通常、キーを押すと、入力された文字がテキスト領域に表示され、入力が行われます。入力イベントは、実際にキーがタイプされたものについての情報を与えるものではありません-あなたは何が変更されたか、それを把握するために、テキストボックスを検査する必要があるだろう-私たちは本当にそれをキーイベントを考慮していないので、実際にここでそれを文書化していません。もともとはテキストエリアと入力ボックスに対してのみ定義されていましたが、他のタイプのオブジェクトにも発砲するように一般化する動きがあると思います。

onkeypressとonkeydownは同じように動作しているようです（前述のショートカットキーのわずかな違いです）。

あなたはこれを試すことができます：

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

また、キーが押されたときではなく、キーが押されたときにイベントonkeypressとonkeydownの両方がトリガーされることがわかります。

違いは、イベントが1回ではなく何度もトリガーされることです（キーを押し続けている限り）。それを認識し、それに応じて処理してください。

onkeypressイベントは、すべてのブラウザでALT、CTRL、SHIFT、ESCを除くすべてのキーで機能しますが、onkeydownイベントはすべてのキーで機能します。つまり、onkeydownイベントはすべてのキーをキャプチャします。

ちょうど好奇心を共有したかった：

onkeydownイベントを使用してJSメソッドをアクティブ化すると、そのイベントの文字コードは、onkeypressで取得したものとは異なります。

たとえば、テンキーのキーは、onkeypressを使用する場合は文字キーの上の数字キーと同じ文字コードを返しますが、onkeydownを使用する場合は返しません。

onkeydownを使用しているときに、特定の文字コードをチェックするスクリプトが失敗した理由を理解するのにかなりの時間を要しました。

デモ： https //www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

はい。メソッドの定義が異なることは知っていますが、非常に混乱しているのは、両方のメソッドでevent.keyCodeを使用してイベントの結果が取得されるということです。ただし、同じ値が返されません。宣言的な実装。

基本的に、これらのイベントはブラウザーのタイプやバージョンによって動作が異なります。少しjsBinテストを作成しました。ターゲット環境でこれらのイベントがどのように動作するかをコンソールで確認できます。http://jsbin.com/zipivadu/10/edit

更新された回答：

KeyDown

• キーを押し続けると、複数回発動します。
• メタキーを起動します。

KeyPress

• キーを押し続けると、複数回発動します。
• メタキーを起動しません。

KeyUp

• キーを離すと、最後に一度発火します。
• メタキーを起動します。

これは、両方での動作であるaddEventListenerとjQuery。

https://jsbin.com/vebaholamu/1/edit?js,console,output <-例を試す

（回答は正しい回答、スクリーンショット、例で編集されています）

処理するイベントを決定するのに役立ついくつかの実際的な事実（以下のスクリプトを実行して、入力ボックスに注目してください）：

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

押す：

• 非挿入/タイピングのキーが（例えばShift、Ctrl）トリガされませんkeypress。それを押しCtrlて離します。

  キーダウン17 17コントロール

  キーアップ17 17コントロール

• 他の文字に文字変換を適用するキーボードからのキーはにつながる可能性がデッドと「キー」を複製する（例えば~、´上）keydown。´ダブルを表示するには、それを押して放します´´。

  キーダウン192 192デッド

  キーダウン192 192´´

  キープレス180 180 ´

  キープレス180 180 ´

  キーアップ192192デッド

さらに、タイピング以外の入力（たとえばranged <input type="range">）でも、押されたキーに応じて、すべてのキーアップ、キーダウン、キープレスイベントがトリガーされます。