检测JavaScript中的箭头键按下


458

如何检测何时按下箭头键之一?我用它来找出:

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

尽管它适用于所有其他键,但不适用于箭头键(可能是因为默认情况下浏览器应该在这些键上滚动)。

Answers:


733

箭头键仅由触发onkeydown,而不由触发onkeypress

关键代码为:

  • 左= 37
  • 上= 38
  • 右= 39
  • 下= 40

15
某些浏览器确实会触发keypress箭头键事件,但您是正确的,它keydown始终适用于箭头键。
蒂姆·唐

4
如果按%,则还会得到keyCode 37
xorcus,

9
@xorcus-不,您遇到53一个keydown事件。你37与之相处keypress,这是另一回事
Mark Kahn 2013年

7
那onkeyup呢?
1nfiniti 2014年

2
@MrCroft-或也收听onkeyup并停止该事件。实际上,您不应该使用Java脚本修改UI行为。
马克·卡恩

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
    }

}

第二行是做什么的?
eshellborn

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之前的版本)上使用,而该事件未传递到处理函数中。
Mark Rhodes 2014年

12
只是要注意keyCode是一个数字,理想情况下应使用===
alexrogers

11
@ketan的关键是keyCode是一个数字,应该像keyCode === 32keyCode == '32'或一样进行检查keyCode === '32'
Nenotlep 2015年

98

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",或其他任何键

Mozilla文件

支持的浏览器

PS 箭头event.code相同


5
感谢您使用keykeyCode不赞成,已弃用。
v010dya

8
来自MDN的注释:Internet Explorer,Edge(16或更早版本)和Firefox(36或更早版本)使用“ Left”,“ Right”,“ Up”和“ Down”代替“ ArrowLeft”,“ ArrowRight”,“ ArrowUp” ”和“ ArrowDown”。
西蒙

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.charCode和window.event代替e),但不必这样做。您可以在http://www.asquare.net/javascript/tests/KeyCode.html上尝试大多数方法。请注意,event.keycode不适用于Firefox中的onkeypress,但适用于onkeydown。


3
我不得不仰视的定义简洁,那么我(sprightfully)推测tersest是不恰当的结合; conc,我承认:我的恳求是可以辩驳的
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

近代以来的答案键代码现在已经过时,有利于关键

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
    }
};

11

我相信最新的方法是:

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函数之外吗?无需每次通话都重新创建它
-Grief

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;是:可以
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

那是chrome和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>

3

我也一直在寻找这个答案,直到我看到这篇文章。

我发现了另一个解决方案,可以根据我的问题来了解不同键的键码。我只是想分享我的解决方案。

只需使用keyup / keydown事件将值写入控制台/使用相同的提示即可event.keyCode。喜欢-

console.log(event.keyCode) 

// or

alert(event.keyCode)

-卢比




2

回复答案,你需要keydownkeypress

假设您想在按下键的同时连续移动某些内容,我发现该功能keydown适用于Opera以外的所有浏览器。对于Opera,keydown仅在第一次按下时触发。为了适应Opera的使用:

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

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');
    }
 });

1

箭头键触发KEYUP

$(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,拉屎

onkeyup允许制表符,向上箭头,向下箭头,向左箭头,向下箭头


0

控制键代码%=37&=38...,仅向左箭头键= 37向上= 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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.