jQuery Event Keypress:按下了哪个键?

jQuery Event Keypress: Which key was pressed?

提问人:BlaM 提问时间:11/19/2008 最后编辑:A. CampbellBlaM 更新时间:7/12/2021 访问量:864894

问:

使用 jQuery,如何找出绑定到按键事件时按下了哪个键?

$('#searchbox input').bind('keypress', function(e) {});

我想在按下时触发提交。ENTER

[更新]

尽管我自己找到了(或更好的是:一个)答案,但似乎有一些变化的余地;)

和之间有区别吗 - 特别是如果我只是在寻找,这永远不会是 unicode 密钥?keyCodewhichENTER

某些浏览器是否提供一个属性,而其他浏览器提供另一个属性?

JavaScript jQuery 事件 绑定 按键

评论

306赞 Tyler 11/22/2009
** 如果有人从 Google 获得了这一点(就像我一样),请知道“keyup”而不是“keypress”在 Firefox、IE 和 Chrome 中有效。“按键”显然只在Firefox中起作用。
18赞 Tyler 11/22/2009
此外,“keydown”比“keyup”在按下键后触发事件效果更好(显然),但如果你说如果文本区域为空,则要在第二个退格键上触发事件,这一点很重要
13赞 jackocnr 5/26/2010
至于 e.keyCode VS e.which...根据我的测试,Chrome 和 IE8:keypress() 处理程序只会针对普通字符(即不是 Up/Down/Ctrl)触发,并且 e.keyCode 和 e.which 都将返回 ASCII 代码。然而,在Firefox中,所有键都会触发keypress(),但是:对于普通字符,e.which 将返回 ASCII 码,e.keyCode 将返回 0,对于特殊字符(例如 Up/Down/Ctrl),e.keyCode 将返回键盘代码,e.which 将返回 0。多么有趣。
5赞 Daniel Ribeiro 8/29/2010
警告:不要使用谷歌代码中的那个。jquery的作者提交了一个补丁,该补丁仅在github存储库(以及John Resig的fork)上:github.com/tzuryby/jquery.hotkeys。当将多个键事件绑定到同一个 dom 节点时,来自 google code 的那个行为不端。新的解决了它。
4赞 Toskan 10/8/2012
当您长时间按下一个键时,“keyup”会非常非常晚地触发。看到这里 jsbin.com/aquxit/3/edit 所以按键是要走的路

答:

7赞 BlaM 11/19/2008 #1

好吧,我是瞎子:

e.which

将包含密钥的 ASCII 代码。

查看 https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

139赞 Vladimir Prudnikov 11/19/2008 #2

试试这个

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
874赞 Eran Galperin 11/19/2008 #3

实际上,这更好:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }

评论

87赞 Kieran Senior 4/1/2010
if ((e.keyCode || e.which) == 13) ?;)
49赞 Ztyx 6/22/2010
根据本页下方的评论,jQuery规范化,以便每次都在事件对象上定义“which”。因此,检查“keyCode”应该是不必要的。
61赞 user35612 11/20/2008 #4

如果您使用的是 jQuery UI,则具有通用键代码的翻译。在 ui/ui/ui.core.js 中:

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

tests/simulate/jquery.simulate.js 中也有一些翻译,但我在核心 JS 库中找不到任何翻译。请注意,我只是在寻找消息来源。也许还有其他方法可以摆脱这些神奇的数字。

您还可以使用 String.charCodeAt 和 .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true

评论

14赞 SavoryBytes 9/3/2009
更正它是 *$.ui.keyCode.ENTER** 而不是 *$.keyCode.ENTER -- 确实像魅力一样工作,尽管谢谢小费!
0赞 Patrick Roberts 9/16/2015
Uncaught TypeError: String.charCodeAt is not a function我想你的意思是说'\r'.charCodeAt(0) == 13
14赞 rajakvk 2/17/2009 #5
$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

希望这对您有所帮助!!

-9赞 Omar Yepez 2/10/2010 #6

试试这个:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
8赞 Phil 3/6/2010 #7

以下是对各种浏览器行为的详细描述 http://unixpapa.com/js/key.html

评论

2赞 Tim Down 1/25/2011
这绝对是每个挣扎着提供绝望答案的人都应该阅读的页面。
41赞 Frank Schwieterman 3/6/2010 #8

鉴于您使用的是 jQuery,您绝对应该使用 .which。是的,不同的浏览器设置不同的属性,但jQuery会规范化它们,并在每种情况下设置.which值。见文档 http://api.jquery.com/keydown/ 它指出:

为了确定按下了哪个键,我们可以检查传递给处理程序函数的事件对象。虽然浏览器使用不同的属性来存储此信息,但 jQuery 规范化了 .which 属性,以便我们可以可靠地使用它来检索密钥代码。

评论

2赞 Danny 6/15/2010
从我所看到的情况来看,使用 event.which 并尝试与 $.ui.keyCode 进行比较会导致不确定的行为。具体来说,小写的 [L] 键映射到 $.ui.keyCode.NUMPAD_ENTER。可爱。
5赞 Frank Schwieterman 1/19/2011
您是否有演示此错误的重现?最好将此报告给jQuery的所有者,而不是尝试重新实现他们的工作。
28赞 Luca Filosofi 5/7/2010 #9
 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });

评论

1赞 Oscar Foley 5/15/2010
这才是真正的答案。接受的键对某些键(如 enter)有效,但对其他键(如 supr 会被 .
19赞 Ian Clelland 7/8/2010
这是来自 jQuery 源的直接粘贴,是 jQuery 用于规范化 .which 事件属性的代码。
0赞 Luca Filosofi 11/9/2010
@Ian Clelland:我不明白你的意思,这行得对不对!?哈哈
13赞 Ian Clelland 11/11/2010
它确实有效;我确信这一点,因为jQuery正是使用该代码:)如果你已经有可用的jQuery,那么就使用它 - 你不需要在你自己的代码中使用它。
1赞 Ian Clelland 2/22/2013
@aSeptik:问题是“我有jQuery;我如何按下键“ -- 你的回答显示了jQuery首先是如何得到它的。我的观点是,由于jQuery已经包含这一行代码,他不需要它。他可以只用.event.which
32赞 user184365 5/13/2010 #10

...此示例阻止表单提交(通常是捕获击键 #13 时的基本意图):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
21赞 user397198 7/21/2010 #11

查看支持组合键的优秀 jquery.hotkeys 插件

$(document).bind('keydown', 'ctrl+c', fn);
4赞 Pedja 4/19/2011 #12

添加隐藏提交,而不是键入隐藏,只需使用 style=“display:none” 进行普通提交。下面是一个示例(从代码中删除了不必要的属性)。

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

它将在本机接受回车键,不需要 JavaScript,适用于每个浏览器。

4赞 molokoloco 7/14/2011 #13

女巫;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

演示 : http://jsfiddle.net/molokoloco/hgXyq/24/

2赞 user669677 9/14/2011 #14

根据 Kilian 的回答:

如果只有回车键很重要:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
3赞 manny 11/17/2011 #15
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

您应该有 firbug 才能在控制台中看到结果

2赞 Rodolfo Jorge Nemer Nogueira 12/16/2011 #16

我做的最简单的方法是:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});

评论

1赞 zanetu 9/17/2013
最好使用而不是 .从 jQuery API:event.whichevent.keyCodeThe event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
5赞 dzona 2/11/2012 #17

我只会用这一行补充解决方案代码。 如果表格的输入字段,我们不参加在输入时提交e.preventDefault();

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
4赞 Reid Evans 10/13/2012 #18

下面是一个 jquery 扩展,它将处理正在按下的回车键。

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

可以在此处找到一个工作示例 http://jsfiddle.net/EnjB3/8/

27赞 Kevin 1/8/2013 #19

编辑:这仅适用于IE...

我意识到这是一个旧帖子,但有人可能会觉得这很有用。

键事件是映射的,因此,除了使用键码值外,您还可以使用键值来使其更具可读性。

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

这是我从这个博客中获得的带有映射密钥的备忘单 enter image description here

评论

5赞 SLaks 2/8/2013
没有财产。e.key
3赞 Kevin 2/8/2013
嗯,它看起来像是 IE 特定的属性。它适用于我在 IE 中的应用程序,但不适用于 Chrome。猜猜我用的是键码。
3赞 Hitesh Modha 5/8/2014 #20

有些浏览器使用 keyCode,有些浏览器使用 which。如果你使用的是jQuery,你可以可靠地使用它,因为jQuery使事情标准化。实际上

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});
2赞 Zach Barham 6/30/2015 #21

我刚刚为jQuery制作了一个插件,允许更简单的事件。您不必找到号码并将其输入,您所要做的就是:keypress

如何使用它

  1. 包括我下面的代码
  2. 运行以下代码:
$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

就是这么简单。请注意,这不是一个数字,而是一个字符串(例如,按下时触发,按下时触发,或者,如果是数字,只是,没有引号。按下时会触发。theKeyYouWantToFireAPressEventFor"a"A"ctrl"CTRL (control)11

示例/代码:

function getPressedKey(e){var a,s=e.keyCode||e.which,c=65,r=66,o=67,l=68,t=69,f=70,n=71,d=72,i=73,p=74,u=75,h=76,m=77,w=78,k=79,g=80,b=81,v=82,q=83,y=84,j=85,x=86,z=87,C=88,K=89,P=90,A=32,B=17,D=8,E=13,F=16,G=18,H=19,I=20,J=27,L=33,M=34,N=35,O=36,Q=37,R=38,S=40,T=45,U=46,V=91,W=92,X=93,Y=48,Z=49,$=50,_=51,ea=52,aa=53,sa=54,ca=55,ra=56,oa=57,la=96,ta=97,fa=98,na=99,da=100,ia=101,pa=102,ua=103,ha=104,ma=105,wa=106,ka=107,ga=109,ba=110,va=111,qa=112,ya=113,ja=114,xa=115,za=116,Ca=117,Ka=118,Pa=119,Aa=120,Ba=121,Da=122,Ea=123,Fa=114,Ga=145,Ha=186,Ia=187,Ja=188,La=189,Ma=190,Na=191,Oa=192,Qa=219,Ra=220,Sa=221,Ta=222;return s==Fa&&(a="numlock"),s==Ga&&(a="scrolllock"),s==Ha&&(a="semicolon"),s==Ia&&(a="equals"),s==Ja&&(a="comma"),s==La&&(a="dash"),s==Ma&&(a="period"),s==Na&&(a="slash"),s==Oa&&(a="grave"),s==Qa&&(a="openbracket"),s==Ra&&(a="backslash"),s==Sa&&(a="closebracket"),s==Ta&&(a="singlequote"),s==B&&(a="ctrl"),s==D&&(a="backspace"),s==E&&(a="enter"),s==F&&(a="shift"),s==G&&(a="alt"),s==H&&(a="pause"),s==I&&(a="caps"),s==J&&(a="esc"),s==L&&(a="pageup"),s==M&&(a="padedown"),s==N&&(a="end"),s==O&&(a="home"),s==Q&&(a="leftarrow"),s==R&&(a="uparrow"),s==S&&(a="downarrow"),s==T&&(a="insert"),s==U&&(a="delete"),s==V&&(a="winleft"),s==W&&(a="winright"),s==X&&(a="select"),s==Z&&(a=1),s==$&&(a=2),s==_&&(a=3),s==ea&&(a=4),s==aa&&(a=5),s==sa&&(a=6),s==ca&&(a=7),s==ra&&(a=8),s==oa&&(a=9),s==Y&&(a=0),s==ta&&(a=1),s==fa&&(a=2),s==na&&(a=3),s==da&&(a=4),s==ia&&(a=5),s==pa&&(a=6),s==ua&&(a=7),s==ha&&(a=8),s==ma&&(a=9),s==la&&(a=0),s==wa&&(a="times"),s==ka&&(a="add"),s==ga&&(a="minus"),s==ba&&(a="decimal"),s==va&&(a="devide"),s==qa&&(a="f1"),s==ya&&(a="f2"),s==ja&&(a="f3"),s==xa&&(a="f4"),s==za&&(a="f5"),s==Ca&&(a="f6"),s==Ka&&(a="f7"),s==Pa&&(a="f8"),s==Aa&&(a="f9"),s==Ba&&(a="f10"),s==Da&&(a="f11"),s==Ea&&(a="f12"),s==c&&(a="a"),s==r&&(a="b"),s==o&&(a="c"),s==l&&(a="d"),s==t&&(a="e"),s==f&&(a="f"),s==n&&(a="g"),s==d&&(a="h"),s==i&&(a="i"),s==p&&(a="j"),s==u&&(a="k"),s==h&&(a="l"),s==m&&(a="m"),s==w&&(a="n"),s==k&&(a="o"),s==g&&(a="p"),s==b&&(a="q"),s==v&&(a="r"),s==q&&(a="s"),s==y&&(a="t"),s==j&&(a="u"),s==x&&(a="v"),s==z&&(a="w"),s==C&&(a="x"),s==K&&(a="y"),s==P&&(a="z"),s==A&&(a="space"),a}

$(document).keydown(function(e) {
  $("#key").text(getPressedKey(e));
  console.log(getPressedKey(e));
  if (getPressedKey(e)=="space") {
    e.preventDefault();
  }
  if (getPressedKey(e)=="backspace") {
    e.preventDefault();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The Pressed Key: <span id=key></span></p>

因为长版太...井。。。很长,我已经为它制作了一个 PasteBin 链接:
http://pastebin.com/VUaDevz1

评论

0赞 BlaM 7/1/2015
如果您不使用数百万个“if”比较 -> jsfiddle.net/BlaM/bcguctrx - 还要注意 - 例如,openbracket 和 closebracket 不是德语键盘上的左/右括号。
22赞 Ivan 8/7/2017 #22

这几乎是 keyCodes 的完整列表:

3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"
6赞 Gibolt 2/19/2018 #23

使用和现代 JS!event.key

不再有数字代码。您可以直接检查密钥。例如,、 、 或 。"Enter""LeftArrow""r""R"

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Mozilla 文档

支持的浏览器

2赞 bakrall 11/6/2019 #24

和 已弃用。请参阅上面@Gibolt答案或查看文档:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEventevent.keyCodeevent.which

event.key应该改用

keypress事件也已弃用:https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event