С помощью 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
}e.which того, какое событие вы используете. e.whichне устанавливается (остается 0), но e.keyCodeесть ( 9). См. Stackoverflow.com/questions/4793233/… почему это важно. Хорошо, я был слепым
e.whichбудет содержать код ASCII ключа.
Попробуй это
$('#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'
trueUncaught 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/ :
Чтобы определить, какая клавиша была нажата, мы можем исследовать объект события, который передается в функцию-обработчик. Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство .which, поэтому мы можем надежно использовать его для получения кода ключа.
// 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');
}
});event.which. ... этот пример предотвращает отправку формы (обычно основное намерение при захвате нажатия клавиши # 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.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);Согласно ответу Килиана:
Если важен только ввод, нажмите клавишу:
<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>$(document).bind('keypress', function (e) {
console.log(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собственности. Некоторые браузеры используют 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)11
Пример / Код:
Поскольку длинная версия такая ... ну ... длинная, я сделал для нее ссылку на PasteBin:
http://pastebin.com/VUaDevz1
Это почти полный список ключевых кодов:
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