JavaScript/jQuery で矢印キー イベントを処理する方法?

JavaScript/jQuery での矢印キー イベントの処理

JavaScript または jQuery でキーボード入力を操作する場合、関数を特定のキーにバインドすると、ユーザーインタラクションを制御し、応答性の高いナビゲーションを提供するために重要です。この文脈において、共通の課題は、左右の矢印キー イベントをキャプチャすることです。一般的な考えに反して、jQuery の js-hotkey プラグインは矢印キー バインディングをネイティブにサポートしていません。

プレーン Javascript を使用する

を使用せずに直接バインドする場合外部ライブラリを使用する場合は、次のコード スニペットを検討してください。

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

このコードでは、主要なイベントは onkeydown イベント ハンドラーを使用して監視されます。矢印キーは、それぞれの値によって識別されます (例: 左は 37、右は 39)。スクロールやキャレットの移動などのデフォルトのブラウザ動作を防止するには、preventDefault() メソッドが使用されます。

IE8 のサポート

Internet Explorer 8 をサポートする必要がある場合what プロパティをサポートしていない場合は、次のようにコードを拡張できます:

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event; // IE8 compatibility
    switch(e.which || e.keyCode) {
        // ...
    }
};</code>

最新の解決策: KeyboardEvent.key

最新のブラウザでは、 KeyboardEvent.that プロパティは非推奨になりました。矢印キーを検出するためのより最新のアプローチについては、代わりに KeyboardEvent.key プロパティを利用できます。

<code class="javascript">document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowLeft': // left
      break;
    case 'ArrowUp': // up
      break;
    case 'ArrowRight': // right
      break;
    case 'ArrowDown': // down
      break;
    default: return;
  }
});</code>

以上がJavaScript/jQuery で矢印キー イベントを処理する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。