JavaScriptで矢印キーが押されたことを検出する
いずれかの矢印キーが押されたときにどうすれば検出できますか？これを使って調べました。
function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}
それは他のすべてのキーではうまくいきましたが、矢印キーではうまくいきませんでした（おそらくブラウザはデフォルトでこれらのキーをスクロールするはずです）。
矢印キーはonkeydownではなくonkeypressによってのみ引き起こされます
キーコードは以下のとおりです。
- 左= 37
- アップ= 38
- 右= 39
- ダウン= 40
キーの上下通話機能。各キーには異なるコードがあります。
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
}
}
おそらく最も簡潔な定式化：
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の代わりにe.which、e.charCode、およびwindow.event）が、必要ではないはずです。あなたはそれらのほとんどを/で試してみることができます http://www.asquare.net/javascript/tests/KeyCode.html 。 event.keycodeはFirefoxのonkeypressでは動作しませんが、onkeydownでは動作します。
event.key === "ArrowRight" ...
もっと最近の、そしてもっときれいなもの：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"やその他のキーをチェックするためにこれを簡単に拡張することができます。
P.S event.codeは同じ矢印用
矢印キーなどの印刷不可能なキーには、keydownではなくkeypressを使用します。
function checkKey(e) {
e = e || window.event;
alert(e.keyCode);
}
document.onkeydown = checkKey;
私が見つけた最高のJavaScriptキーイベントリファレンス（例えばquirksmodeからズボンを打つ）はここにあります： http://unixpapa.com/js/key.html
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;
これが実装例です：
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);
}
});
これが私のやり方です。
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.
}
私はjQueryを使ってそれらをトラップすることができました：
$(document).keypress(function (eventObject) {
alert(eventObject.keyCode);
});
それがクロムとFirefoxの作業コードです。
<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>
この記事に出会うまで、私はこの答えも探していました。
私は私の問題のおかげで、さまざまなキーのキーコードを知るための別の解決策を見つけました。私は自分の解決策を共有したいだけでした。
Keyup/keydownイベントを使ってconsole/alertに値を書き込むだけで、event.keyCodeを使って同じことができます。好き -
console.log(event.keyCode)
// or
alert(event.keyCode)
- ルパム
それはもっと短いです。
function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }
この図書館は揺れる！ https://craig.is/killing/mice
Mousetrap.bind('up up down down left right left right b a enter', function() {
highlight([21, 22, 23]);
});
ただし、そのページのコードを強調表示するには、シーケンスを少し速く押す必要があります。
最新の方法は次のようになると思います。
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（）;を削除します。このハンドラーによってキャッチされたものを含むキー押下がまだアクティブである必要がある場合、行。
keydownではなくkeypressが必要だと答えます。
キーが押されている間に何かを継続的に移動させたいのであれば、keydownはOpera以外のすべてのブラウザで機能することがわかりました。 Operaの場合、keydownは1回目のプレスでしかトリガーしません。 Operaの使用に対応するために：
document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc
矢印キーが押されたことを検出したいが、Javascriptで特定する必要はない場合
function checkKey(e) {
if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
// do something
};
}
キーコード%=37および&=38...を制御し、左矢印キーのみ= 37 up = 38
function IsArrows (e) {
return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40));
}