JavaScriptでの矢印キーの押下の検出


459

矢印キーの1つが押されたことをどのように検出しますか?私はこれを見つけ出すためにこれを使いました:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

他のすべてのキーでは機能しましたが、矢印キーでは機能しませんでした(おそらく、ブラウザがデフォルトでこれらのキーをスクロールすることになっているためです)。

回答:


734

矢印キーはでのみトリガーされonkeydown、ではトリガーされませんonkeypress

キーコードは次のとおりです。

  • 左= 37
  • アップ= 38
  • 右= 39
  • ダウン= 40

15
一部のブラウザーはkeypress矢印キーのイベントをトリガーしますが、それはkeydown常に矢印キーで機能します。
Tim Down

4
%を押すと、keyCode 37
xorcus

9
@xorcus-いいえ、イベントで取得53しますkeydown。あなたは取得37keypress異なるものである、
マーク・カーン

7
onkeyupはどうですか?
1nfiniti 2014年

2
@MrCroft-またはonkeyup、そこでイベントを聞いて停止します。ただし、現実には、JavaScriptでUIの動作を変更するべきではありません。
Mark Kahn

225

キーの上下の呼び出し機能。キーごとに異なるコードがあります。

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

2行目は何をしますか?
eshellborn 2013

16
明確にするために、 'e || window.event 'は、' e 'が定義された値の場合、' || 'の結果になることを意味します 式。'e'が定義されていない場合、 'window.event'は '||'の結果になります 式。つまり、基本的には以下の略記です: e = e ? e : window.event; または:if (typeof(e) === "undefined") { e = window.event; }
Michael Calvin

17
これは、イベントがハンドラー関数に渡されなかった古いバージョンのIE(IE9より前)で機能させるためです。
マークロードス

12
keyCodeは数値であり、===を使用するのが理想的です
alexrogers '21 / 04/15

11
@ketan要点は、keyCodeは数値でありkeyCode === 32keyCode == '32'またはではなくのようにチェックする必要があるということkeyCode === '32'です。
Nenotlep 2015

98

event.key === "矢印右" ...

より新しく、よりクリーン:を使用しますevent.key。これ以上の任意の番号コードはありません!トランスパイルしている場合や、ユーザーがすべて最新のブラウザを使用している場合は、これを使用してください!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

詳細な処理:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

これを簡単に拡張して"w", "a", "s", "d"、やその他のキーをチェックできます

Mozillaドキュメント

サポートされているブラウザ

PS event.code矢印と同じです


5
ご利用いただきありがとうございkeyなくkeyCode廃止されましたこと、。
v010dya 2017

8
MDNからの注意:Internet Explorer、Edge(16以前)、およびFirefox(36以前)では、「ArrowLeft」、「ArrowRight」、「ArrowUp」の代わりに「Left」、「Right」、「Up」、および「Down」を使用します。 "、および" ArrowDown "。
Simon、

95

おそらく最も簡潔な定式化:

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};

デモ(ユーザーAngus Grantに感謝):http : //jsfiddle.net/angusgrant/E3tE6/

これはクロスブラウザで動作するはずです。動作しないブラウザがある場合はコメントを残してください。

キーコードを取得する方法は他にもあります(e.which、e.charCode、e。の代わりにwindow.event)。ただし、それらは必須ではありません。それらのほとんどはhttp://www.asquare.net/javascript/tests/KeyCode.htmlで試すことができます。event.keycodeはFirefoxのonkeypressでは機能しませんが、onkeydownでは機能します。


3
私はterseの定義を調べなければならなかったので、私は(恐らくterestは不適切な活用であると仮定しました。悲しいかな、私は認めます:私の懇願は反駁できました
ashleedawg

20

矢印キーなどの印刷できkeydownないkeypressキーには使用しないでください。

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

私が見つけた最高のJavaScriptキーイベントリファレンス(たとえば、パンツをquirksmodeから打ち負かす)は、http://unixpapa.com/js/key.htmlです。


16

keyCodekeyに代わって廃止されたため、最新の回答:

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

12

最新の方法は次のようになると思います:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

これは、開発者がページ上のどこでもコードをアクティブにしたいと考えており、クライアントは他のキーの押下を無視する必要があることを前提としています。event.preventDefault();を削除します。このハンドラーによってキャッチされたキープレスを含むキープレスがまだアクティブである必要がある場合、行。


9
function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

1
arrs関数の外に置く価値はありませんか?通話のたびに再作成する必要はありません
悲しみ

8

次に実装例を示します。

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

私は取得しています$ 0が定義されていない var targetElement = typeof $0 !== 'undefined' ? $0 : document.body;か、単に:var targetElement = document.body;okです
papo

7

ここに私がそれをした方法があります:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

5

私はそれらをjQueryでトラップすることができました:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

例:http : //jsfiddle.net/AjKjU/


4
keypress矢印キーでは機能しません。$(document).on('keydown', function() {...})代わりに使用する必要があります
Juribiyan

4

それはクロムとファイアフォックスのための作業コードです

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

3

この投稿に出会うまで、私もこの答えを探していました。

私の問題の好意により、さまざまなキーのキーコードを知る別の解決策を見つけました。私は自分のソリューションを共有したかっただけです。

keyup / keydownイベントを使用して、を使用して同じ値をコンソール/アラートに書き込みますevent.keyCode。お気に入り-

console.log(event.keyCode) 

// or

alert(event.keyCode)

-ルパム



3

このライブラリは素晴らしい! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

ただし、そのページのコードを強調表示するには、シーケンスを少し速く押す必要があります。


2

あなたがする必要がkeydownないと答えますkeypress

キーが押されている間、継続的に何かを動かしたい場合、keydownOpera以外のすべてのブラウザで動作します。Operaの場合、keydown最初のプレスでのみトリガーされます。Operaの使用に対応するには:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

2

矢印キーはキーアップ時にトリガーされます

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydownはctrl、alt、shitsを許可します

onkeyupでは、タブ、上矢印、下矢印、左矢印、下矢印を使用できます


1

jqueryを使用する場合は、次のようにすることもできます。

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });

0

キーコード%=37&=38...を制御し、矢印キーのみleft = 37 up = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

0

矢印キーの押下を検出したいが、JavaScriptでの特定は必要ない場合

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

0

キーとES6。

これにより、スイッチを使用せずに矢印キーごとに個別の機能が提供され、がオンのときにテンキーの2,4,6,8キーでも機能しますNumLock

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.