ホームページ > 記事 > ウェブフロントエンド > JavaScript/jQuery で矢印キー イベントを処理する方法?
JavaScript または jQuery でキーボード入力を操作する場合、関数を特定のキーにバインドすると、ユーザーインタラクションを制御し、応答性の高いナビゲーションを提供するために重要です。この文脈において、共通の課題は、左右の矢印キー イベントをキャプチャすることです。一般的な考えに反して、jQuery の js-hotkey プラグインは矢印キー バインディングをネイティブにサポートしていません。
を使用せずに直接バインドする場合外部ライブラリを使用する場合は、次のコード スニペットを検討してください。
<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() メソッドが使用されます。
Internet Explorer 8 をサポートする必要がある場合what プロパティをサポートしていない場合は、次のようにコードを拡張できます:
<code class="javascript">document.onkeydown = function(e) { e = e || window.event; // IE8 compatibility switch(e.which || e.keyCode) { // ... } };</code>
最新のブラウザでは、 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 サイトの他の関連記事を参照してください。