web-dev-qa-db-ja.com

jQueryキープレス、キーダウン、キーアップブラックマジック（Mac）の背後にある理論は何ですか？

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

@ o.v .:あなたは私にいくつかのコードを見せるように頼みましたが、それは私が解決しようとしているコードの特定の問題ではありません。私はこれらのイベントハンドラーの動作を把握しようとし、それらを理解している人に適切なドキュメントを教えてもらいます。

JQueryを使用して入力フォームを作成し、それをドキュメントに挿入します。ほとんどの場合、問題なく動作します。私が見ている他のほとんどの入力フォームと同様に、フォームをキーボードに応答させたい： esc キーは、キャンセルボタンをクリックするのと同じように、フォームに<textarea> cmd + enter [〜＃〜] ok [〜＃〜]ボタンをクリックするのと同じである必要があります。 keypressイベントを使用するのは十分簡単なようです。問題は、Chromeが私のkeypressハンドラーを呼び出さない esc キーまたは cmd + enter。それは ctrl + enter そして option + enter および英数字の場合、ただし cmd + enter。

そのため、代わりにkeyupを使用します。 keyupを取得します esc、およびkeyup for cmd、およびkeyup for enter、 すごい。しかし、私はkeyupを取得しません enter 押しながらキー cmd。

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

jquerymacoskeypresskeydownkeyup
49
SaganRitual

キープレス ：

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

キーダウン ：

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

キーアップ ：

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

また、これは便利な情報であり、通常は次のように説明されています。

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

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

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

MACのcmdキーに関する詳細情報： コマンドキーのjQueryキーコード

89
Chase

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

簡単な答えは、異なるブラウザを説明する以外にそれらを処理する簡単な方法はないということです。

作成したブートストラッププラグイン で個人的に処理する方法は、サポートされているイベントを確認するカスタムメソッドを作成することです。偶然にも、非常によく似た方法が公式の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));
}
5
Terry

MacでKeyboardEventを検証するとき、⌘修飾キーはnotがevent.ctrlKeyとしてではなくevent.metaKeyとして選択されることを覚えておく必要があります。詳細なドキュメントは [〜＃〜] mdn [〜＃〜] で入手できます。

コードを見ないで、これが⌘+Enterが選択されない理由であることに私は賭けています。

1
o.v.