40

JavaScriptでの , , ,keydownイベントkeypressのkeyupさまざまな使用法を区別しようとしています。inputchange

JavaScript オートコンプリート検索ボックスの場合、inputイベント ハンドラーを使用する必要があるというのは本当ですか?

その理由は：

  1. イベント ハンドラーは、changeユーザーが Enter キーを押すか、その入力ボックスを離れる (Tab キーを押すか、入力ボックスの外側をクリックする) まで呼び出されないためchange、ユーザーがもう 1 つ入力したときに、イベントが提案を行う目的に適合しない可能性があります。文字を入力ボックスに。

  2. keydownイベント ハンドラーを使用してキーストロークを検索用語に「追加」できますが、CTRL-v または CMD-v (Mac の場合) で貼り付ける場合、そのような単語を貼り付けると、実際には 1 つずつ取得できませんkeyCode。検索ボックスと同じように -- ではなくhelloCTRL 用のキーダウンと , 用のキーダウンが 1 つだけになるため-- しかし、入力ボックスの属性を使用して値を取得できます -- ただし、ユーザーがマウスを使用してボックスにテキストを追加するには、右クリックして [貼り付け] を選択します。この場合、マウス イベント ハンドラを使用して属性を確認する必要がありますか? このような低レベルのキーボードとマウスを扱うのは面倒です。vhellovaluevalue

したがって、値が変更されるとイベントハンドラーが呼び出されるinputため、イベントハンドラーは正確な目的に適合しているように見えます。inputそのため、inputイベント ハンドラーが重要かつ有用な場合があります。

keydownユーザーが下矢印キーを押して可能なアイテムのリストを下に移動した場合はどうなるでしょうか。(そしておそらく、オートコンプリートの提案ボックスを非表示にするための ESC)。このような場合、inputイベント ハンドラーとchangeイベント ハンドラーは呼び出されず、keydownイベントはこれらの場合に役立ちます。

input主にイベントを理解するために、上記の概念は正しいですか?

(どのイベント ハンドラーが呼び出されるかを理解するための jsfiddle: http://jsfiddle.net/jYsjs/ )

4

1 に答える 1

62

おおむね正しいと思います。イベントと潜在的な入力ケースの詳細を次に示します。

JavaScript イベント

これは、別のイベントがトリガーされるときです。

  • change

    これは、 の値が変更されblurた場合にイベントがトリガーされたときに呼び出されます。<input>つまり、入力がフォーカスを失い、値が以前のものと異なる場合にトリガーされます。

  • input

    inputイベントは基本的にあなたが探しているものすべてであり、入力の変更時にイベントをキャプチャし、すべてのキーストロークを監視するものを開発する際の頭痛の原因が原因である可能性が最も高い. 入力イベントは、マウスがコンテンツに貼り付けられた場合でもキャッチすることができます。

    残念ながら、このinputイベントは比較的新しく、最新のブラウザー (IE9+) でのみ利用できます。

  • keydown

    イベントは非常に単純で、keydownユーザーがキーを押し下げたときにトリガーされます。

  • keypress

    このkeypressイベントは、タイプされた文字を表すと想定されています。このため、 backspace や delete をキャプチャせず、 で使用するためにすぐに破棄しますkeydown。

  • keyup

    と同様keydownに、ユーザーがキーを放すたびにトリガーされます。

  • paste

    この便利なイベントは、データが要素に貼り付けられたときにトリガーされます。

修飾キー

、 、およびには、それぞれ修飾キー、、プロパティの、およびに関する情報が含まれていることkeydownに注意してください。keypresskeyupCtrlShiftAltctrlKeyshiftKeyaltKey

ケース

考慮する必要があるケースのリストを次に示します。

  • キーボードによる入力 (キーを押し続けることを含む)

    トリガー: keydown、keypress、input、keyup

  • 入力の削除 ( Backspace/ Delete)

    トリガー: keydown、input、keyup

  • Ctrl+を使用した貼り付けV

    トリガー: keydown、paste、input、keyup

  • マウスで貼り付け

    トリガー: paste、input

  • オートコンプリート (↑</kbd>/↓</kbd>)

    トリガー: keydown、keyup

実装

上記を考えるとinput、入力へのすべての変更のイベントを処理するオートコンプリート ボックスを実装し、次にkeydownアップとダウンを処理するイベントを実装できます。これにより、すべてがうまく分離され、非常にきれいなコードが得られます。

IE8 をサポートしたい場合は、貼り付け以外のすべてをkeydownイベ​​ントにスローしてから、 を処理する必要がありますpaste。このpasteイベントは現在非常に広くサポートされており、IE では v5.5 からサポートされています)。

イベントの実験

イベントのテストに使用した jsFiddleを次に示します。各イベントに関するもう少し詳しい情報が表示されます。

function logEvent(e) {
    console.log(e.type +
                "\n    this.value = '" + this.value + "'" +
                (e.keyCode ? "\n    e.keyCode  = '" + e.keyCode + "'" : "") +
                (e.keyCode ? "\n    char       = '" + String.fromCharCode(e.keyCode) + "'" : ""));
    console.log(e);
}

参考文献

于 2013-03-31T08:51:51.673 に答える