使用jQuery,当我绑定到按键事件时,如何找出按下了哪个键?
$('#searchbox input').bind('keypress', function(e) {});
我想在ENTER按下时触发提交.
[更新]
即使我发现(或者更好:一个)自己回答,似乎还有一些变异的空间;)
有没有之间的差异keyCode
和which
-尤其是如果我只是在寻找ENTER,这永远不会是一个unicode关键?
有些浏览器提供一个属性而其他浏览器提供另一个属性吗?
实际上这更好:
var code = e.keyCode || e.which; if(code == 13) { //Enter keycode //Do something }
试试这个
$('#searchbox input').bind('keypress', function(e) { if(e.keyCode==13){ // Enter pressed... do anything here... } });
如果您使用的是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
鉴于您使用的是jQuery,您应该绝对使用.which.是的,不同的浏览器设置不同的属性,但jQuery会规范化它们并在每种情况下设置.which值.请参阅http://api.jquery.com/keydown/上的文档说明:
要确定按下了哪个键,我们可以检查传递给处理函数的事件对象.虽然浏览器使用不同的属性来存储此信息,但jQuery会规范化.which属性,以便我们可以可靠地使用它来检索密钥代码.
...这个例子阻止了表单提交(定期捕获按键#13时的基本意图):
$('input#search').keypress(function(e) { if (e.which == '13') { e.preventDefault(); doSomethingWith(this.value); } });
// 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'); } });
编辑:这仅适用于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 } });
这是一个带有映射键的备忘单,我从这个博客得到了
查看支持组合键的优秀jquery.hotkeys插件:
$(document).bind('keydown', 'ctrl+c', fn);
$(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(); }); });
希望这可以帮到你!!!
这几乎是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"
好吧,我是盲人:
e.which
将包含密钥的ASCII代码.
请参阅https://developer.mozilla.org/En/DOM/Event.which
以下是各种浏览器行为的详细说明http://unixpapa.com/js/key.html
我将用这一行补充解决方案代码e.preventDefault();
.在表格的输入栏的情况下,不参加按下提交
var code = (e.keyCode ? e.keyCode : e.which); if(code == 13) { //Enter keycode e.preventDefault(); //Do something }