49

keypress、keydown、keyupのさまざまな動作について混乱しています。このトリオの微妙なニュアンスを説明する重要なドキュメントを見逃したようです。これらのイベントをより効果的に使用するために、どのドキュメントを読む必要があるかを誰かが理解するのを手伝ってもらえますか？詳細が必要な場合は、以下を参照してください。

@ov：あなたは私にいくつかのコードを表示するように頼みましたが、それは私が解決しようとしているコードの特定の問題ではありません。私はこれらのイベントハンドラーの動作を把握しようとしており、それらを理解している誰かに、優れたドキュメントを紹介するように依頼しています。

jQueryを使用して入力フォームを作成し、それをドキュメントに挿入します。ほとんどの場合、問題なく動作します。フォームが、他のほとんどの入力フォームと同じようにキーボードに応答するようにします。escキーは、キャンセルボタンをクリックするのと同じようにフォームを閉じる必要があります。また、フォームにはが表示<textarea>されているため、cmd+enterはクリックするのと同じである必要があります。OKボタン。keypressイベントを使用するのは簡単なようです。問題は、Chromeがキーまたは+のキープレスハンドラーを呼び出さないことです。+と+ 、および英数字に対して起動しますが、+に対しては起動しません。esccmdenterctrlenteroptionentercmdenter

そのため、代わりにキーアップを使用します。のキーアップ、のキーアップ、およびのキーアップを取得します。しかし、押している間はキーのキーアップが得られません。esccmdenterentercmd

3回目の魅力は、キーダウンが機能しているように見えるかもしれませんが、キーダウンを使用すると、キーが繰り返されます。最初に呼び出されたときにハンドラーのバインドを解除するだけですが、3つの異なるイベントタイプの動作が非常に異なるのは奇妙に思えます。どうしてこれなの？私が明らかに読んでいない明らかな文書はありますか？

4

3 に答える 3

90

キープレス:

keypress イベントは、ブラウザーがキーボード入力を登録するときに要素に送信されます。これは、キーの繰り返しの場合を除いて、keydown イベントに似ています。ユーザーがキーを押したままにすると、keydown イベントが1 回トリガーされますが、挿入された文字ごとに個別の keypress イベントがトリガーされます。さらに、修飾キー(Shift など) は keydown イベントをトリガーしますが、keypress イベントはトリガーしません。

キーダウン:

keydown イベントは、ユーザーが最初にキーボードのキーを押したときに要素に送信されます。任意の要素にアタッチできますが、イベントはfocus を持つ要素にのみ送信されます。フォーカス可能な要素は ブラウザによって異なる場合がありますが、フォーム要素は常にフォーカスを取得できるため、このイベント タイプの妥当な候補です。

キーアップ:

keyup イベントは、ユーザーがキーボードのキーを離したときに要素に送信されます。任意の要素にアタッチできますが、イベントはfocus を持つ要素にのみ送信されます。フォーカス可能な要素はブラウザーによって異なりますが、フォーム要素は常にフォーカスを取得できるため、このイベント タイプの妥当な候補です。

また、これは通常は見過ごされがちな便利な情報です。

キーの押下をキャッチする必要がある場合 (たとえば、ページにグローバル ショートカット キーを実装する場合)、この動作をドキュメント オブジェクトに関連付けると便利です。イベントのバブリングのため、明示的に停止しない限り、すべてのキーの押下は DOM を介してドキュメント オブジェクトに到達します。

入力された文字を特定するには、ハンドラー関数に渡されるイベント オブジェクトを調べます。ブラウザはさまざまなプロパティを使用してこの情報を保存しますが、jQuery は.which プロパティを正規化するため、文字コードを確実に取得できます。

keydown と keyup はどのキーが押されたかを示すコードを提供し、keypress はどの文字が入力されたかを示すことに注意してください。たとえば、小文字の "a" は、keydown と keyup では 65 と報告されますが、keypress では 97 と報告されます。大文字の「A」は、すべてのイベントで 65 として報告されます。この違いにより、矢印キーなどの特殊なキーストロークをキャッチする場合は、.keydown() または .keyup() を選択することをお勧めします。

cmdMAC 上のキーに関する詳細情報:コマンド キーの jQuery キー コード

于 2012-10-10T20:09:22.750 に答える
5

この記事keyupは、keydownとの違いを説明する優れたリソースkeypressです。

簡単に言えば、さまざまなブラウザーを考慮する以外に、それらを処理する簡単な方法はないということです。

私が作成した Bootstrap プラグインで個人的に処理する方法は、サポートされているイベントを確認するカスタム メソッドを作成することです。偶然にも、非常によく似た方法が、少し後に公式の Bootstrap バージョンに現れました:P

//------------------------------------------------------------------
//
//  Check if an event is supported by the browser eg. 'keypress'
//  * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 1.8
//
eventSupported: function(eventName) {         
    var isSupported = (eventName in this.$element);

    if (!isSupported) {
      this.$element.setAttribute(eventName, 'return;');
      isSupported = typeof this.$element[eventName] === 'function';
    }

    return isSupported;
}

後でコードで使用して、イベント ハンドラーをアタッチします。

if (this.eventSupported('keydown')) {
  this.$element.on('keydown', $.proxy(this.keypress, this));
}
于 2012-10-10T20:09:10.933 に答える
1
于 2012-10-11T01:43:43.700 に答える