web-dev-qa-db-ja.com

onKeyPress対。 onKeyUpおよびonKeyDown

これら3つのイベントの違いは何ですか？グーグルで私はそれを見つけた

KeyDownイベントは、ユーザーがキーを押すと発生します。

KeyUpイベントは、ユーザーがキーを離したときに発生します。

KeyPressイベントは、ユーザーがキーを押して放したときに発生します。 （onKeyDownの後にonKeyUp）

私は最初の2つを理解していますが、KeyPressと同じではありませんKeyUp？ （または押さないでキー（KeyUp）を放すこともできますか（KeyDown）それを押しますか？）

これは少しややこしいです、誰かが私のためにこれを片付けることができますか？

javascriptdomjavascript-events
267
instantsetsuna

アーカイブされた link もともとこの答えで使われていたものをここでチェックしてください。

そのリンクから：

理論的には、keydownイベントとkeyupイベントはキーの押下または解放を表し、keypressイベントは入力中の文字を表します。理論の実装はすべてのブラウザで同じではありません。

163
dcp

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

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

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

keydown
keypress
textInput     
keyup

編集数ヶ月前にVsyncがデモスニペットを追加しましたが、機能しなくなったため削除しました。「Uncaught DOMException：からの 'localStorage'プロパティの読み取りに失敗しました。 'Window'：文書はサンドボックス化されており、 'allow-same-Origin'フラグがありません。テストページで試すことができます、しかし：

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

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

onkeydownはキーが押されたときに起動されます（ショートカットのように。例えばCtrl+Aでは、Ctrlは 'down'のままです）。

キーが解放されたときにonkeyupが起動されます（修飾子/ etcキーを含む）

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

何らかのテキストが入力されるとtextInput（Webキットのみ）が起動されます（たとえば、Shift+Aは大文字の「A」を入力しますが、Ctrl+Aはテキストを選択し、テキスト入力を入力しません。その場合、他のすべてのイベントが起動されます）。

14
arunjitsingh

ここでの答えの大部分は実際的な問題よりも理論に焦点を合わせており、少なくともFirefoxでは入力フィールド値に関連するためkeyupとkeypressの間には大きな違いがいくつかあります（43でテスト済み）。

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

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

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

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

シナリオ：

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

文字keypressを入力した後にAイベントが発生すると、テキストボックスに文字Aのみが含まれるようになりました。

しかし：

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

そのため、ブラウザ（Firefox 43）がユーザーの選択を消去し、thenがkeypressイベントを発生させ、thenがフィールドの内容を更新し、then fireが発生するkeyup。

14
Nick

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回ではなく何度もトリガーされることです（キーを押したままにしている限り）。それを認識し、それに応じて対処してください。

10
Falk

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

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

keydownイベントは、キーが押されたときに発生し、すぐにkeypressイベントが続きます。次に、キーが放されると、keyupイベントが生成されます。

keydownとkeypressの違いを理解するには、charactersおよびkeys。 keyは、コンピューターのキーボード上の物理的なボタンです。 characterは、ボタンを押して入力する記号です。 USキーボードで、 4 キーを押しながら Shift キーは通常「ドル記号」文字を生成します。これは、必ずしも世界中のすべてのキーボードに当てはまるわけではありません。理論的には、keydownおよびkeyupイベントはキーが押されているか放されていることを表し、keypressイベントは、入力されている文字を表します。実際には、これは常に実装方法とは限りません。

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

inputと呼ばれるイベントもあり、すべてのブラウザでサポートされ、textareaに変更が加えられた直後に起動されますまたは入力フィールド。通常、キーを押すと起動し、入力した文字がテキスト領域に表示され、入力が起動します。 inputイベントは、実際に入力されたキーに関する情報を提供しません-変更されたものを把握するためにテキストボックスを調べる必要があるため、実際には考慮しませんこれは重要なイベントであり、実際にここに文書化しないでください。もともとはテキストエリアと入力ボックスに対してのみ定義されていましたが、他のタイプのオブジェクトでも同様に起動するように一般化する動きがあると思います。

8
Suraj Jain

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

8
Mohd Sadiq

まず、それらは異なる意味を持ちます。

  • KeyDown - キーが押されたとき
  • KeyUp - 押されたボタンが離されたとき、の後の値input/textareaが更新されました（これらのうち唯一のもの）
  • KeyPress - それらの間で、実際にはキーが押されて離されたという意味ではありません（下記参照）。

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

  • KeyPressは無視します delete、矢印、 home/end、 ctrl、 alt、 shift KeyDownやKeyUpなどはそうではありません。
  • を介してウィンドウを切り替えると alt+tab Windowsでは、KeyDownのみ alt ウィンドウ切り替えが他のイベント（およびKeyDown for tab システムによって妨げられている、私は、少なくともChrome 71）で、と思います。

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

最後に、いくつかの実用性があります。

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

私は自分のプロジェクトで3つすべてを使用しましたが、残念ながら実用性の一部を忘れているかもしれません。 （注意：inputとchangeイベントもあります）

7
YakovL

好奇心を共有したいだけでした。

onkeydownイベントを使ってJSメソッドを起動するとき、そのイベントの文字コードはonkeypressで得られるものと同じではありません。

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

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

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

はい。メソッドの定義が異なることを私は知っています..しかし、非常に混乱しているのは両方のメソッドでイベントの結果がevent.keyCodeを使って検索されるということです。宣言的な実装.

3
Drummer

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

3
Ken Chan

KeyDown - 物理的にキーを押したとき

KeyUp - 鍵を物理的に離したとき

KeyPress - 文字が入力されているように…KeyPressあなたが押し続けると複数回起動します鍵、他の人が一度だけ発射する場所。

1
Quang Van