С jQuery, как узнать, какой ключ был нажат, когда я привязываюсь к событию нажатия клавиши?
$('#searchbox input').bind('keypress', function(e) {});
Я хочу вызвать submit при нажатии ENTER.
[Обновление]
Несмотря на то, что я сам нашел (или лучше: один) ответ, кажется, есть место для изменения;)
Есть ли разница между keyCode
и which
- особенно если я просто ищу ENTER, который никогда не будет символом юникода?
Есть ли в некоторых браузерах одно свойство, а другие - другое?
На самом деле это лучше:
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,
...
};
Там также некоторые переводы в тестах/имитировать/jquery.simulate.js, но я не смог найти их в основной библиотеке JS. Имейте в виду, я просто загорелся источниками. Возможно, есть и другой способ избавиться от этих магических чисел.
Вы также можете использовать String.charCodeAt и .fromCharCode:
>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
Uncaught TypeError: String.charCodeAt is not a function
я думаю, вы хотели сказать '\r'.charCodeAt(0) == 13
Учитывая, что вы используете jQuery, вы должны абсолютно использовать .which. Да, разные браузеры задают разные свойства, но jQuery будет нормализовать их и установить значение .which в каждом случае. См. Документацию в http://api.jquery.com/keydown/, в которой говорится:
Чтобы определить, какая клавиша была нажата, мы можем проверить объект события, который передается функции обработчика. Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство .which, поэтому мы можем надежно использовать его для извлечения key code.
... этот пример предотвращает отправку формы (регулярно основное намерение при захвате нажатия клавиши # 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');
}
});
edit: Это работает только для 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 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
}
});
Вот чит-лист с отображенными ключами, которые я получил из этого
e.key
.
Ознакомьтесь с отличным jquery.hotkeys plugin, который поддерживает комбинации клавиш:
$(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.which
будет содержать код ASCII ключа.
Я просто добавлю код решения этой строкой e.preventDefault();
.
В случае ввода поля формы мы не будем присутствовать при отправке при нажатии
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
e.preventDefault();
//Do something
}
Это в значительной степени полный список 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, которое будет обрабатывать нажатие клавиши ввода.
(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/
Добавить скрытый submit, а не тип скрытый, просто отправить с помощью стиля = "display: none". Вот пример (удалены ненужные атрибуты из кода).
<form>
<input type="text">
<input type="submit" style="display:none">
</form>
он будет принимать ключ ввода изначально, без необходимости использования JavaScript, работает в каждом браузере.
В некоторых браузерах используется keyCode, другие используют. Если вы используете jQuery, вы можете надежно использовать это, поскольку jQuery стандартизирует вещи. На самом деле,
$('#searchbox input').bind('keypress', function(e) {
if(e.keyCode==13){
}
});
$(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);
Я только что создал плагин для jQuery, который облегчает события keypress
. Вместо того, чтобы найти номер и ввести его, все, что вам нужно сделать, это следующее:
$(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), или, в случае числа, просто 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>
Потому что длинная версия так... ну... долго, я создал для нее ссылку PasteBin:
http://pastebin.com/VUaDevz1
Самый простой способ:
$("#element").keydown(function(event) {
if (event.keyCode == 13) {
localiza_cep(this.value);
}
});
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.
Согласно ответу Килиана:
Если вводить только важно нажать клавишу
<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
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...
}
});
Попробуйте следующее:
jQuery('#myInput').keypress(function(e) {
code = e.keyCode ? e.keyCode : e.which;
if(code.toString() == 13) {
alert('You pressed enter!');
}
});