jQuery事件按键:哪个键被按下?
使用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, ... };
在testing/模拟/ jquery.simulate.js也有一些翻译,但我找不到任何在核心JS库。 请注意,我只是想了解消息来源。 也许有其他的方法来摆脱这些神奇的数字。
你也可以使用String.charCodeAt和.fromCharCode:
>>> String.charCodeAt('\r') == 13 true >>> String.fromCharCode(13) == '\r' true
鉴于你正在使用jQuery,你应该绝对使用。 是的不同的浏览器设置不同的属性,但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 …
我意识到这是一个旧的post,但有人可能会觉得这有用。
关键事件是映射的,所以不要使用键码值,而是使用键值使其更具可读性。
$(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(); }); });
希望这可以帮助你!
以下是各种浏览器http://unixpapa.com/js/key.html的行为描述;
我只是用这行e.preventDefault();
补充解决scheme代码e.preventDefault();
。 在input字段的情况下我们不参加提交input按下
var code = (e.keyCode ? e.keyCode : e.which); if(code == 13) { //Enter keycode e.preventDefault(); //Do something }
这是一个jQuery的扩展,将处理input键被按下。
(function ($) { $.prototype.enterPressed = function (fn) { $(this).keyup(function (e) { if ((e.keyCode || e.which) == 13) { fn(); } }); }; }(jQuery || {})); $("#myInput").enterPressed(function() { //do something });
一个工作的例子可以在这里findhttp://jsfiddle.net/EnjB3/8/
添加隐藏的提交,而不是input隐藏,只需提交样式=“显示:无”。 这里是一个例子(从代码中删除不必要的属性)。
<form> <input type="text"> <input type="submit" style="display:none"> </form>
它会原生接受input密钥,不需要JavaScript,可以在每个浏览器中使用。
$(document).bind('keypress', function (e) { console.log(e.which); //or alert(e.which); });
你应该有一个firbug在控制台中看到一个结果
巫婆 ;)
/* 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/
有些浏览器使用keyCode,其他使用哪个。 如果你使用jQuery,你可以可靠地使用jQuery来标准化事物。 其实,
$('#searchbox input').bind('keypress', function(e) { if(e.keyCode==13){ } });
根据Kilian的回答:
如果只input按键很重要:
<form action="javascript:alert('Enter');"> <input type=text value="press enter"> </form>
我最简单的方法是:
$("#element").keydown(function(event) { if (event.keyCode == 13) { localiza_cep(this.value); } });
我刚刚做了一个jQuery的插件,允许更容易的keypress
事件。 而不是必须find这个号码并把它放进去,所有你需要做的就是:
如何使用它
- 包括我下面的代码
- 运行这个代码:
$(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
不是一个数字,而是一个string(例如,按下A时触发的"a"
,按下CTRL (控制)时触发的"ctrl"
,或者在数字的情况下只有1
引号,当按下1时会激发。)
示例/代码:
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>
这几乎是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"
尝试这个:
jQuery('#myInput').keypress(function(e) { code = e.keyCode ? e.keyCode : e.which; if(code.toString() == 13) { alert('You pressed enter!'); } });