jQuery Event Keypress：按下了哪个键？

706

使用jQuery，如何确定绑定到keypress事件时按下了哪个键？

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

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

[更新]

即使我找到了（或者更好：一个）自己回答，似乎还有一些变化的空间;）

有没有之间的差异keyCode和which-尤其是如果我只是在寻找ENTER，这永远不会是一个unicode关键？

有些浏览器提供一种属性，而其他浏览器提供另一种属性吗？

javascript  jquery  events  bind  keypress 
— 布莱姆
source
295
**如果有人（像我一样）从Google获得了此信息，请知道在Firefox，IE和Chrome中可以使用“ keyup”而不是“ keypress”。“ keypress”显然仅在Firefox中有效。
— 泰勒
17
同样，“ keydown”比“ keyup”在触发事件后（显然）触发事件的效果更好（显然），但是如果您说想在文本区域为空的情况下要在SECOND Backspace上触发事件，则这一点很重要
— Tyler
12
至于e.keyCode VS e.which ...从我的测试中，Chrome和IE8：keypress（）处理函数将仅针对正常字符（即不是Up / Down / Ctrl）以及e.keyCode和e触发。这将返回ASCII码。但是，在Firefox中，所有键都会触发keypress（），但：对于正常字符e。将返回ASCII码，e.keyCode将返回0，对于特殊字符（例如Up / Down / Ctrl），e.keyCode将返回键盘代码和e。，将返回0。多么有趣。
— jackocnr
4
警告：请勿使用Google代码中的那个。jquery的作者提交了一个补丁，该补丁仅在github仓库上（以及John Resig的fork上）：github.com/tzuryby/jquery.hotkeys。将多个按键事件绑定到同一dom节点时，来自Google代码的行为不当。新的解决了。
— 丹尼尔·里贝罗
4
当您长时间按下某个按键时，“按键”将在很晚之后触发。看到这里jsbin.com/aquxit/3/edit这样的keydown是要走的路
— Toskan

Answers:

844

其实这更好：

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
— 伊兰·加珀林
source
84
if（（（e.keyCode || e.which）== 13）？;）
— Kezzer 2010年
49
根据本页后面的评论，jQuery进行规范化，以便每次在事件对象上定义“哪个”。因此，无需检查“ keyCode”。
— Ztyx
197
为什么要进行大量投票？问题是有关jQuery的，它对这些东西进行了规范化，因此，无论您使用哪种事件，都无需使用以外的任何东西e.which。
— 蒂姆·唐
48
@Tim：las，我刚刚使用api.jquery.com/keypress在Firefox上进行了测试：当我按下<Tab>时，e.which未设置（保持0），但设置e.keyCode为（9）。请参阅stackoverflow.com/questions/4793233/…为什么如此重要。
— 马塞尔·科佩尔
3
@Marcel：是的，jQuery的键处理有缺点，这是一个不幸的例子，但是对于Enter键（这是这个问题要问的），情况非常简单。
— 蒂姆·唐
133

尝试这个

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
— 弗拉基米尔·普鲁德尼科夫
source
5
@VladimirPrudnikov哦，哦，啊！啊！在那个链接上有Mac的eveywhere-人类！！！
— Ben DeMott
1
好了，我们推出了Windows应用程序的新版本太..看看snippets.me
— 弗拉基米尔·普鲁德尼科夫
2
@VladimirPrudnikov Linux版本如何？
— Arda 2012年
@Arda我们没有Linux版本的计划。将有一个Web应用程序和一个公共API，因此，可能有人会创建它：)
— Vladimir Prudnikov 2012年
1
哈哈哈，没有针对Linux的计划的开发人员工具。丰富！
— Ziggy
61

如果您使用的是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
— 用户名
source
13
更正它的是* $。ui.keyCode.ENTER **而不是* $。keyCode.ENTER-确实起到了魅力的作用，尽管给小费！
— daniellmb
Uncaught TypeError: String.charCodeAt is not a function我想您是想说'\r'.charCodeAt(0) == 13
— Patrick Roberts
39

假设您使用的是jQuery，则应绝对使用.which。是的，不同的浏览器设置了不同的属性，但是jQuery将对其进行规范化并分别设置.which值。请参阅http://api.jquery.com/keydown/上的文档，其中指出：

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

— 弗兰克·施维特曼
source
2
根据我所见，使用event.which并尝试与$ .ui.keyCode进行比较会导致不确定的行为。特别是小写的[L]键，它映射到$ .ui.keyCode.NUMPAD_ENTER。可爱。
— Danny 2010年
4
您是否有一个演示此错误的repro？最好向jQuery所有者报告此情况，而不是尝试重新实现其工作。
— Frank Schwieterman 2011年
31

...此示例阻止了表单提交（通常是捕获按键13的基本意图）：

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
— 用户名
source
28

编辑：这仅适用于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
    }
});

这是一份备忘单，其中包含我从此博客获得的映射密钥 在此处输入图片说明

— 凯文
source
5
没有e.key财产。
— SLaks
3
嗯，看起来像是IE特有的属性。它适用于我在IE中的应用，但不适用于Chrome。猜猜我正在使用键码。
— 凯文
28 
 // 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');
     }
 });
— 卢卡·费洛索菲（Luca Filosofi）
source
1
这是真正的答案。被接受的密钥将为某些键工作（例如回车），但将为其他密钥失败（如将被a误认为的supr）。–
— 奥斯卡·弗利
19
这是从jQuery源直接粘贴的，是jQuery用于规范.which事件属性的代码。
— 伊恩·克莱兰
@Ian Clelland：我不明白你的意思，这行得通吗？哈哈
— Luca Filosofi 2010年
13
它确实有效；我敢肯定，因为jQuery正是使用该代码:)如果您已经有了jQuery，则只需使用它-您无需在自己的代码中使用它。
— 伊恩·克莱兰
1
@aSeptik：问题是“我有jQuery；如何按下键” –您的答案显示了jQuery是如何首先获得它的。我的观点是，由于jQuery已经包含此行代码，因此他不需要它。他可以使用event.which。
— 伊恩·克莱兰
14 
$(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();
    });
});

希望这对您有帮助！！！

12

这几乎是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"
— 伊万
source
5

我将在这一行中补充解决方案代码e.preventDefault();。在表单输入字段的情况下，我们不会按Enter进行提交

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
— 佐纳
source
4

添加隐藏的提交，而不是隐藏类型，只需使用style =“ display：none”简单提交即可。这是一个示例（从代码中删除了不必要的属性）。

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

它将接受本机输入密钥，无需JavaScript，可在所有浏览器中使用。

— 佩杰
source
4

这是一个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/

— 里德·埃文斯（Reid Evans）
source
4

巫婆 ;）

/*
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/

— 莫洛可可
source
4

采用 event.key和现代的JS！

没有数字代码了。您可以直接检查密钥。例如"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文件

支持的浏览器

— 吉博尔特
source
3 
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

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

— 曼尼
source
3

一些浏览器使用keyCode，其他浏览器使用keyCode。如果您使用的是jQuery，则可以可靠地使用jQuery标准化的东西。其实，

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

    }
});
— Hitesh Modha
source
2

根据Kilian的回答：

如果仅输入按键很重要：

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
2

我最简单的方法是：

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
— 鲁道夫·豪尔赫·内默·诺盖拉
source
1
最好使用event.which代替event.keyCode。从jQuery API：The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
— zanetu
2

我刚刚制作了一个用于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

示例/代码：

显示代码段

因为长版本是如此……好……很长，我为此做了一个PasteBin链接：http ://pastebin.com/VUaDevz1

— 扎克·巴勒姆（Zach Barham）
source
如果您不使用数百万个“如果”比较，则可以使函数变得更短，更快。- > jsfiddle.net/BlaM/bcguctrx-另外请注意-例如，openbracket和closebracket不在a上的open / close括号中。德语键盘`。
— BlaM 2015年
我喜欢这个解决方案。很好
— 杰伊
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.