Нажатие клавиши события jQuery: какая клавиша была нажата?
Как с помощью jQuery узнать, какая клавиша была нажата при привязке к событию нажатия клавиши?
$('#searchbox input').bind('keypress', function(e) {});
Я хочу инициировать отправку при нажатии ENTER.
[Обновлять]
Несмотря на то, что я сам нашел (или лучше: один) ответ, похоже, есть место для вариаций;)
Есть ли разница между keyCode и which - особенно если я просто ищу ENTER, который никогда не будет ключом Unicode?
Некоторые браузеры предоставляют одно свойство, а другие - другое?
кроме того, «keydown» работает лучше, чем «keyup» для запуска события ПОСЛЕ того, как была нажата клавиша (очевидно), но это важно, если вы говорите, что хотите вызвать событие на ВТОРОМ backspace, если текстовое поле пусто
Что касается 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. Как весело.
или вы можете использовать это: github.com/jeresig/jquery.hotkeys :)
Предупреждение: НЕ используйте код из кода Google. Автор jquery прислал патч, который есть только в репозитории github (и форке Джона Ресига): github.com/tzuryby/jquery.hotkeys. Код из кода Google ведет себя неправильно при привязке более одного ключевого события к одному и тому же узлу dom. Новый решает это.
"keyup" сработает очень поздно, когда вы, например, нажмите клавишу в течение длительного времени. Смотрите здесь jsbin.com/aquxit/3/edit, так что нажатие клавиши - это путь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 24
Ладно, я ослеп:
e.which
будет содержать код ASCII ключа.
См. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
Попробуй это
$('#searchbox input').bind('keypress', function(e) {
if (e.keyCode==13){
// Enter pressed... do anything here...
}
});
@VladimirPrudnikov Ой ой, ааааааааааааааааааааааааааааааааааааааадче менее интересным. Ах! везде по этой ссылке были Mac - человечество !!!
Что ж, мы запустили новую версию с приложением для Windows ... проверьте snippets.me
@VladimirPrudnikov как насчет Linux-версии?
@Arda у нас нет планов по версии для linux. Будет веб-приложение и публичный API, так что, может быть, кто-нибудь его создаст :)
Ха-ха-ха, инструмент разработчика без планов для Linux. Богатый!
На самом деле так лучше:
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
//Do something
}
если ((e.keyCode || e.which) == 13)? ;)
Согласно комментарию ниже на этой странице, jQuery нормализуется, так что 'which' каждый раз определяется для объекта события. Таким образом, проверка на «keyCode» не требуется.
Почему такое огромное количество положительных голосов? Вопрос касается jQuery, который нормализует все это, поэтому есть не нужно использовать ничего, кроме e.which, какое бы событие вы ни использовали.
@Tim: Увы, я только что протестировал это с Firefox, используя api.jquery.com/keypress: когда я нажимаю <Tab>, e.which не устанавливается (остается 0), а e.keyCode - (9). См. stackoverflow.com/questions/4793233/…, почему это важно.
@Marcel: Да, обработка ключей jQuery имеет недостатки, и это неудачный пример, но для клавиши Enter, о которой идет речь в этом вопросе, ситуация чрезвычайно проста.
Кажется, что Firefox немного отличается от других браузеров в обработке кода ключа события. Это должно сработать: <br/> <i> if ((e.keyCode? E.keyCode: e.charCode) == 13) {// сделать что-нибудь для возврата нажатия клавиши} </i>
@Kezzer Firefox, похоже, немного отличается от других браузеров в обработке кода ключа события. Firefox принимает e.charCode. Это должно работать: if ((e.keyCode?e.keyCode:e.charCode)==13){//do something for return keypress}
@Marcel, у меня это отлично работает в Chrome и Firefox (в Linux): jsfiddle.net/lathan/X5xyX Какую версию jQuery вы используете? (на этой тестовой странице используется версия 1.6.2)
@Lathan: ваша тестовая страница использует keydown вместо keypress, поэтому кажется, что у вас он работает правильно. Я использую FF 5 в Linux.
Это работает и для клавиши ввода цифровой клавиатуры? У меня нет этого на моем ноутбуке, но мне показалось, что я вспомнил, что это другой код.
Меня смущает порядок, т.е нормализованный. Если он присутствует, почему бы нам не использовать его сначала, а затем откатиться на e.keyCode? В отличие от использования сначала ненормализованной версии, а затем нормализованной версии.
@TimDown. «Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется следить за event.which для ввода с клавиатуры». Подтверждение вашей претензии документами.
e.which === 10 в Chrome, если e.ctrlKey истинно
@Lane Извините, но я не могу поверить, что это изменение, которое существенно меняет код ответа 5-летней давности с 473 голосами за, было одобрено. Если вы считаете, что у вас есть лучший способ сделать это, опубликуйте новый ответ, а не заменяйте существующий ответ. Я откатываю это назад.
Код ответа смешивает коды сканирования клавиатуры с кодами ASCII. Есть некоторые совпадения (вызывающие путаницу), но это две совершенно разные концепции.
keyCode устарел. Используйте key и keyCode для совместимости.
Если вы используете пользовательский интерфейс jQuery, у вас есть переводы для общих кодов клавиш. В 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
Исправление, это * $. ui.keyCode.ENTER ** не * $. keyCode.ENTER - действительно работает как шарм, хотя спасибо за подсказку!
Uncaught TypeError: String.charCodeAt is not a function Я думаю, вы хотели сказать '\r'.charCodeAt(0) == 13$(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();
});
});
Надеюсь, это поможет вам !!!
Попробуй это:
jQuery('#myInput').keypress(function(e) {
code = e.keyCode ? e.keyCode : e.which;
if (code.toString() == 13) {
alert('You pressed enter!');
}
});
Вот подробное описание поведения различных браузеров http://unixpapa.com/js/key.html
Это абсолютно та страница, которую следует прочитать всем, кто пытается найти безнадежные ответы.
Учитывая, что вы используете jQuery, вам обязательно нужно использовать .which. Да, разные браузеры устанавливают разные свойства, но jQuery нормализует их и в каждом случае устанавливает значение .which. См. Документацию на http://api.jquery.com/keydown/, в ней говорится:
To determine which key was pressed, we can examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so we can reliably use it to retrieve the key code.
Из того, что я видел, используя event.which и пытаясь сравнить с $ .ui.keyCode, приводит к неопределенному поведению. В частности, клавиша [L] в нижнем регистре, которая соответствует $ .ui.keyCode.NUMPAD_ENTER. Милый.
У вас есть репро, демонстрирующее эту ошибку? Лучше сообщить об этом владельцам jQuery, чем пытаться заново реализовать их работу.
// 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');
}
});
Это настоящий ответ. Принятый будет работать для некоторых ключей (например, Enter), но не будет работать для других (например, supr, который будет ошибочно принят за.)
Это прямая вставка из источника jQuery и код, который jQuery использует для нормализации свойства события .which.
@ Ян Клелланд: я не могу понять вашу точку зрения, правильно это работает или нет !? ржу не могу
Это действительно работает; Я уверен в этом, потому что jQuery использует именно этот код :) Если у вас уже есть jQuery, просто используйте его - вам не нужно иметь это в своем собственном коде.
@ Ян Клелланд: Так почему ОП задает вопрос, если он уже использует jQuery?
@aSeptik: Вопрос был в том, «У меня есть jQuery; как мне нажать клавишу» - ваш ответ показывает, как jQuery получает это в первую очередь. Я хотел сказать, что, поскольку jQuery уже содержит эту строку кода, она ему не нужна. Он может просто использовать event.which.
@ Ян Клелланд: почему принятый ответ почти такой же, как и у меня?
@aSeptik Я не могу говорить от имени Яна, но одна из веских причин может заключаться в том, что если OP использует jQuery и updatse, он / она автоматически получает выгоду от любых улучшений, которые могут быть внесены в этот фрагмент, о которых команда jQuery знает а ОП - нет.
... этот пример предотвращает отправку формы (обычно основное намерение при захвате нажатия клавиши # 13):
$('input#search').keypress(function(e) {
if (e.which == '13') {
e.preventDefault();
doSomethingWith(this.value);
}
});
Ознакомьтесь с отличным плагин jquery.hotkeys, который поддерживает комбинации клавиш:
$(document).bind('keydown', 'ctrl+c', fn);
Добавьте скрытую отправку, а не скрытый тип, просто отправьте с помощью style = "display: none". Вот пример (из кода удалены ненужные атрибуты).
<form>
<input type = "text">
<input type = "submit" style = "display:none">
</form>
он принимает ключ ввода изначально, не требует JavaScript, работает во всех браузерах.
Ведьма ;)
/*
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.info(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.info('keycode', keycode);
}
};
$(document).on('keydown keyup keypress', documentKeys);
Согласно ответу Килиана:
Если важно нажатие клавиши только войти:
<form action = "javascript:alert('Enter');">
<input type=text value = "press enter">
</form>
$(document).bind('keypress', function (e) {
console.info(e.which); //or alert(e.which);
});
у вас должен быть firbug, чтобы увидеть результат в консоли
Самый простой способ:
$("#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.
Я просто дополню код решения этой строчкой e.preventDefault();.
В случае поля ввода формы мы не занимаемся отправкой при нажатии клавиши ввода
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
e.preventDefault();
//Do something
}
Вот расширение 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/
изменить: это работает только для 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
}
});
Вот шпаргалка с сопоставленными клавишами, которую я получил от этого блог
Свойство e.key отсутствует.
Хм, похоже, это специфическое свойство IE. Он работает для моего приложения в IE, но не в Chrome. Думаю, я использую ключевой код.
Некоторые браузеры используют keyCode, другие - его. Если вы используете jQuery, вы можете надежно использовать его, поскольку jQuery стандартизирует вещи. На самом деле,
$('#searchbox input').bind('keypress', function(e) {
if (e.keyCode==13){
}
});
Я только что сделал плагин для 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.info(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
Вы можете сделать функцию намного короче и быстрее, если не будете использовать миллионы «if» сравнений -> jsfiddle.net/BlaM/bcguctrx - Также имейте в виду, что, например, openbracket и closebracket не являются открывающими / закрывающими скобками на немецкой клавиатуре.
Мне понравилось это решение. красивый.
Это почти полный список кодов клавиш:
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"
Используйте 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...
}
});
event.keyCode и event.which являются устаревшими. См. Ответ @Gibolt выше или проверьте документацию: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
event.key следует использовать вместо
Событие keypress также разворачивается:
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
** Если кто-то получил это от Google (например, я), знайте, что «keyup» вместо «keypress» работает в Firefox, IE и Chrome. "keypress" очевидно работает только в Firefox.