JavaScript と jQuery で矢印キーをバインドするにはどうすればよいですか?

JavaScript での矢印キーのバインド

一部のアプリケーションでは、特定の機能をキーボードの特定のキーにバインドする必要があります。矢印キー。この記事では、左右の矢印に焦点を当てて、JavaScript と jQuery で矢印キーをバインドする方法を説明します。

標準 JavaScript を使用する

最も簡単な方法バニラ JavaScript で主要なイベントを処理するには、document.onkeydown イベント リスナーを使用します。このイベントに関数を付加することで、キーボード上の物理キーに対応する、押されたキーのキー コードを確認できます。以下に例を示します。

<code class="js">document.onkeydown = function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

jQuery の使用

jQuery は、イベント リスナーをバインドするためのより簡潔で便利な方法を提供します。前のアプローチと同様に、keydown イベントを使用して矢印キーの押下を検出できます。

<code class="js">$(document).on("keydown", function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
});</code>

IE8 互換性

サポートしていない IE8 などのブラウザの場合イベント オブジェクトのどのプロパティを指定するには、次のコードを使用できます。

<code class="js">e = e || window.event;
switch (e.which || e.keyCode) {
  case 37: // Left arrow
    // Do something
    break;

  case 39: // Right arrow
    // Do something else
    break;
}</code>

キー コードに関する注意

ここで使用されるキー コード (37 と 39) は対応しています。をそれぞれ左矢印キーと右矢印キーに押します。他のキーのキー コードは、JavaScript または jQuery の公式ドキュメント Web サイトで見つけることができます。

Modern JavaScript

JavaScript のより新しいバージョンでは、どのプロパティが非推奨になりました。 KeyboardEvent.key を支持します。 KeyboardEvent.key を使用した更新された例を次に示します。

<code class="js">document.onkeydown = function(e) {
  switch (e.key) {
    case "ArrowLeft": // Left arrow
      // Do something
      break;

    case "ArrowRight": // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

これらのメソッドを実装すると、特定の機能を左右の矢印キーに簡単にバインドでき、アプリケーションで効率的なキーボード操作が可能になります。

以上がJavaScript と jQuery で矢印キーをバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。