JS および 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>
このコードは次のようにキャプチャします。 switch ステートメントを使用した、左、上、右、下矢印キーのキーストローク。それぞれのケースで必要なアクションを定義できます。
what プロパティをサポートしていないブラウザー (IE8 など) の場合は、関数本体を次のように変更することに注意してください:
<code class="javascript">document.onkeydown = function(e) { e = e || window.event; switch(e.which || e.keyCode) { case 37: // left break; // ... } };</code>
あるいは、最新のブラウザの場合、次の例に示すように、KeyboardEvent.key プロパティを使用して矢印キーを検出できます。
<code class="javascript">document.onkeydown = function(e) { switch(e.key) { case "ArrowLeft": // left break; // ... } };</code>
このコードを実装すると、JavaScript で関数を矢印キーに簡単にバインドできます。または jQuery アプリケーション。
以上がJavaScript と jQuery で矢印キーストロークをキャプチャするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。