blocks|key|1463392|text|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)
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1463393|如果您需要支持IE8，请以e+=+e+%7C%7C+window.event;+switch(e.which+%7C%7C+e.keyCode)+{启动函数体。|unstyled|offset|length|style|CODE|1463394|(编辑2020)|1463395|请注意，KeyboardEvent.which现在已弃用。有关检测箭头键的更现代解决方案，请参阅this+example+using+KeyboardEvent.key。|1463396|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Example^0|0|D|1H|0|0|4|J|1V|H|1C|10|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|X|8|@$G|Y|H|Z|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|11|8|@$G|12|H|13|I|J]|$G|14|H|15|I|J]]|9|@$G|16|H|17|1|18]]|A|$]]|$1|O|3|-4|5|F|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<pre><code>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></pre>

If you need to support IE8, start the function body as <code>e = e || window.event; switch(e.which || e.keyCode) {</code>.

 (edit 2020) 
Note that <code>KeyboardEvent.which</code> is now deprecated. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Example" rel="noreferrer">this example using <code>KeyboardEvent.key</code></a> for a more modern solution to detect arrow keys.

blocks|key|58682|text|$(document).keydown(function(e){
++++if+(e.which+==+37)+{+
+++++++alert("left+pressed");
+++++++return+false;
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|58683|字符代码：|unstyled|58684|58685|+37+-左侧|blockquote|58686|58687|38个以上|58688|39+-右|58689|40+-+down|58690|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|S|$]]

<pre><code>$(document).keydown(function(e){
 if (e.which == 37) { 
 alert("left pressed");
 return false;
 }
});
</code></pre>

Character codes:

<blockquote>
 37 - left
 
 38 - up
 
 39 - right
 
 40 - down
</blockquote>

blocks|key|58748|text|您可以使用箭头键的keyCode+(37、38、39和40表示左、上、右和下)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|58749|$('.selector').keydown(function+(e)+{
++var+arrow+=+{+left:+37,+up:+38,+right:+39,+down:+40+};

++switch+(e.which)+{
++++case+arrow.left:
++++++//..
++++++break;
++++case+arrow.up:
++++++//..
++++++break;
++++case+arrow.right:
++++++//..
++++++break;
++++case+arrow.down:
++++++//..
++++++break;
++}
});|code-block|syntax|javascript|58750|检查上面的示例here。|offset|length|58751|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/opibu^0|0|0|7|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can use the keyCode of the arrow keys (37, 38, 39 and 40 for left, up, right and down):

<pre><code>$('.selector').keydown(function (e) {
 var arrow = { left: 37, up: 38, right: 39, down: 40 };

 switch (e.which) {
 case arrow.left:
 //..
 break;
 case arrow.up:
 //..
 break;
 case arrow.right:
 //..
 break;
 case arrow.down:
 //..
 break;
 }
});
</code></pre>

Check the above example <a href="http://jsbin.com/opibu" rel="noreferrer">here</a>.

blocks|key|1594783|text|这有点晚了，但是HotKeys有一个非常严重的错误，如果你将多个热键附加到一个元素上，就会导致事件被多次执行。只需使用普通jQuery即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594784|$(element).keydown(function(ev)+{
++++if(ev.which+==+$.ui.keyCode.DOWN)+{
++++++++//+your+code
++++++++ev.preventDefault();
++++}
});|code-block|syntax|javascript|1594785|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a bit late, but HotKeys has a very major bug which causes events to get executed multiple times if you attach more than one hotkey to an element. Just use plain jQuery.

<pre><code>$(element).keydown(function(ev) {
 if(ev.which == $.ui.keyCode.DOWN) {
 // your code
 ev.preventDefault();
 }
});
</code></pre>

blocks|key|295091|text|我简单地结合了其他答案中最好的部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295092|$(document).keydown(function(e){
++++switch(e.which)+{
++++++++case+$.ui.keyCode.LEFT:
++++++++//+your+code+here
++++++++break;

++++++++case+$.ui.keyCode.UP:
++++++++//+your+code+here
++++++++break;

++++++++case+$.ui.keyCode.RIGHT:
++++++++//+your+code+here
++++++++break;

++++++++case+$.ui.keyCode.DOWN:
++++++++//+your+code+here
++++++++break;

++++++++default:+return;+//+allow+other+keys+to+be+handled
++++}

++++//+prevent+default+action+(eg.+page+moving+up/down)
++++//+but+consider+accessibility+(eg.+user+may+want+to+use+keys+to+choose+a+radio+button)
++++e.preventDefault();
});|code-block|syntax|javascript|295093|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I've simply combined the best bits from the other answers:

<pre><code>$(document).keydown(function(e){
 switch(e.which) {
 case $.ui.keyCode.LEFT:
 // your code here
 break;

 case $.ui.keyCode.UP:
 // your code here
 break;

 case $.ui.keyCode.RIGHT:
 // your code here
 break;

 case $.ui.keyCode.DOWN:
 // your code here
 break;

 default: return; // allow other keys to be handled
 }

 // prevent default action (eg. page moving up/down)
 // but consider accessibility (eg. user may want to use keys to choose a radio button)
 e.preventDefault();
});
</code></pre>

blocks|key|294985|text|您可以使用KeyboardJS。我为这样的任务编写了这个库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294986|KeyboardJS.on('up',+function()+{+console.log('up');+});
KeyboardJS.on('down',+function()+{+console.log('down');+});
KeyboardJS.on('left',+function()+{+console.log('right');+});
KeyboardJS.on('right',+function()+{+console.log('left');+});|code-block|syntax|javascript|294987|在此处签出库=>+http://robertwhurst.github.com/KeyboardJS/|offset|length|294988|entityMap|0|LINK|mutability|MUTABLE|url|http://robertwhurst.github.com/KeyboardJS/^0|0|0|9|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can use KeyboardJS. I wrote the library for tasks just like this.

<pre><code>KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });
</code></pre>

Checkout the library here => <a href="http://robertwhurst.github.com/KeyboardJS/">http://robertwhurst.github.com/KeyboardJS/</a>

blocks|key|58969|text|使用普通Javascript的简洁解决方案(感谢Sygmoral提出的改进建议)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|58970|document.onkeydown+=+function(e)+{
++++switch+(e.keyCode)+{
++++++++case+37:
++++++++++++alert('left');
++++++++++++break;
++++++++case+39:
++++++++++++alert('right');
++++++++++++break;
++++}
};|code-block|syntax|javascript|58971|另请参阅https://stackoverflow.com/a/17929007/1397061。|offset|length|58972|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/17929007/1397061^0|0|0|4|18|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

A terse solution using plain Javascript (thanks to Sygmoral for suggested improvements):

<pre><code>document.onkeydown = function(e) {
 switch (e.keyCode) {
 case 37:
 alert('left');
 break;
 case 39:
 alert('right');
 break;
 }
};
</code></pre>

Also see <a href="https://stackoverflow.com/a/17929007/1397061">https://stackoverflow.com/a/17929007/1397061</a>.

blocks|key|58798|text|您确定jQuery.HotKeys不支持箭头键吗？我之前在IE7，Firefox3.5.2和Google+Chrome2.0.172上测试过他们的演示，观察了左，右，上，下的工作情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|58799|编辑：似乎jquery.hotkeys已被重新定位到Github：https://github.com/jeresig/jquery.hotkeys|offset|length|style|BOLD|58800|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jeresig/jquery.hotkeys^0|0|0|2|X|15|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@$D|T|E|U|1|V]]|A|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Are you sure jQuery.HotKeys doesn't support the arrow keys? I've messed around with their demo before and observed left, right, up, and down working when I tested it in IE7, Firefox 3.5.2, and Google Chrome 2.0.172...

EDIT: It appears jquery.hotkeys has been relocated to Github: <a href="https://github.com/jeresig/jquery.hotkeys" rel="nofollow noreferrer">https://github.com/jeresig/jquery.hotkeys</a>

blocks|key|294933|text|您可以使用e.preventDefault();，而不是使用上面示例中的return+false;，它做同样的事情，但更容易理解和阅读。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|294934|entityMap^0|5|J|10|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Instead of using <code>return false;</code> as in the examples above, you can use <code>e.preventDefault();</code> which does the same but is easier to understand and read.

blocks|key|295097|text|纯js向右或向左的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295098|++++++++window.addEventListener('keydown',+function+(e)+{
++++++++++++//+go+to+the+right
++++++++++++if+(e.keyCode+==+39)+{

++++++++++++}
++++++++++++//+go+to+the+left
++++++++++++if+(e.keyCode+==+37)+{

++++++++++++}
++++++++});|code-block|syntax|javascript|295099|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Example of pure js with going right or left

<pre><code> window.addEventListener('keydown', function (e) {
 // go to the right
 if (e.keyCode == 39) {

 }
 // go to the left
 if (e.keyCode == 37) {

 }
 });
</code></pre>

blocks|key|1594860|text|您可以使用jQuery绑定：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594861|$(window).bind('keydown',+function(e){
++++if+(e.keyCode+==+37)+{
++++++++console.log('left');
++++}+else+if+(e.keyCode+==+38)+{
++++++++console.log('up');
++++}+else+if+(e.keyCode+==+39)+{
++++++++console.log('right');
++++}+else+if+(e.keyCode+==+40)+{
++++++++console.log('down');
++++}
});|code-block|syntax|javascript|1594862|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use jQuery bind:

<pre><code>$(window).bind('keydown', function(e){
 if (e.keyCode == 37) {
 console.log('left');
 } else if (e.keyCode == 38) {
 console.log('up');
 } else if (e.keyCode == 39) {
 console.log('right');
 } else if (e.keyCode == 40) {
 console.log('down');
 }
});
</code></pre>

blocks|key|1463558|text|您可以通过以下方式检查是否按下了arrow+key：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1463559|$(document).keydown(function(e){
++++if+(e.keyCode+>+36+&&+e.keyCode+<+41)+{+
+++++++alert(+"arrowkey+pressed"+);
+++++++return+false;
++++}
});|code-block|syntax|javascript|1463560|entityMap^0|G|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can check wether an <code>arrow key</code> is pressed by:

<pre><code>$(document).keydown(function(e){
 if (e.keyCode &gt; 36 &amp;&amp; e.keyCode &lt; 41) { 
 alert( "arrowkey pressed" );
 return false;
 }
});
</code></pre>

blocks|key|1597089|text|一个强大的Javascript库，用于捕获键盘输入和输入的组合键。它没有依赖项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1597090|http://jaywcjlove.github.io/hotkeys/|offset|length|1597091|hotkeys('right,left,up,down',+function(e,+handler){
++++switch(handler.key){
++++++++case+"right":console.log('right');break
++++++++case+"left":console.log('left');break
++++++++case+"up":console.log('up');break
++++++++case+"down":console.log('down');break
++++}
});|code-block|syntax|javascript|1597092|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|10|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. 

<a href="http://jaywcjlove.github.io/hotkeys/" rel="nofollow">http://jaywcjlove.github.io/hotkeys/</a>

<pre><code>hotkeys('right,left,up,down', function(e, handler){
 switch(handler.key){
 case "right":console.log('right');break
 case "left":console.log('left');break
 case "up":console.log('up');break
 case "down":console.log('down');break
 }
});
</code></pre>

blocks|key|1594904|text|防止箭头只对任何对象可用，否则选择，那么实际上我没有tes上的另一个对象LOL。但它可以停止页面上的箭头事件和输入类型。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594905|我已经尝试使用"e.preventDefault()“或"return+false”在"keydown“和"keyup”事件上阻止向左和向右箭头来更改选择对象的值，但它仍然会更改对象的值。但是事件仍然告诉你箭头被按下了。|1594906|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

prevent arrow only available for any object else SELECT, well actually i haven't tes on another object LOL.
but it can stop arrow event on page and input type.

i already try to block arrow left and right to change the value of SELECT object using "e.preventDefault()" or "return false" on "kepress" "keydown" and "keyup" event but it still change the object value. but the event still tell you that arrow was pressed.

blocks|key|1597108|text|我来这里寻找一种简单的方法，让用户在专注于输入时，使用箭头键来%2B1或-1数字输入。我从来没有找到一个好的答案，但我做了下面的代码，似乎工作得很好-现在使这个网站。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1597109|$("input").bind('keydown',+function+(e)+{
++++if(e.keyCode+==+40+&&+$.isNumeric($(this).val())+)+{
++++++++$(this).val(parseFloat($(this).val())-1.0);
++++}+else+if(e.keyCode+==+38++&&+$.isNumeric($(this).val())+)+{+
++++++++$(this).val(parseFloat($(this).val())%2B1.0);
++++}
});+|code-block|syntax|javascript|1597110|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I came here looking for a simple way to let the user, when focused on an input, use the arrow keys to +1 or -1 a numeric input. I never found a good answer but made the following code that seems to work great - making this site-wide now.

<pre><code>$("input").bind('keydown', function (e) {
 if(e.keyCode == 40 &amp;&amp; $.isNumeric($(this).val()) ) {
 $(this).val(parseFloat($(this).val())-1.0);
 } else if(e.keyCode == 38 &amp;&amp; $.isNumeric($(this).val()) ) { 
 $(this).val(parseFloat($(this).val())+1.0);
 }
}); 
</code></pre>

blocks|key|1594871|text|使用咖啡和Jquery|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594872|++$(document).on+'keydown',+(e)+->
++++switch+e.which
++++++when+37+then+console.log('left+key')
++++++when+38+then+console.log('up+key')
++++++when+39+then+console.log('right+key')
++++++when+40+then+console.log('down+key')
++++e.preventDefault()|code-block|syntax|javascript|1594873|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

With coffee &amp; Jquery

<pre><code> $(document).on 'keydown', (e) -&gt;
 switch e.which
 when 37 then console.log('left key')
 when 38 then console.log('up key')
 when 39 then console.log('right key')
 when 40 then console.log('down key')
 e.preventDefault()
</code></pre>

How do I go about binding a function to left and right arrow keys in Javascript and/or jQuery? I looked at the js-hotkey plugin for jQuery (wraps the built-in bind function to add an argument to recognize specific keys), but it doesn't seem to support arrow keys.

Binding arrow keys in JS/jQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

如何在Javascript和/或jQuery中将函数绑定到左右箭头键？我查看了jQuery的js-hotkey插件(包装了内置的绑定函数以添加参数来识别特定的键)，但它似乎不支持箭头键。

问JS/jQuery中的绑定箭头键
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS/jQuery中的绑定箭头键EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JS/jQuery中的绑定箭头键
EN