jQuery Event Keypress: какая клавиша была нажата?

С помощью jQuery, как мне узнать, какая клавиша была нажата при привязке к событию нажатия клавиши?

$('#searchbox input').bind('keypress', function(e) {});

Я хочу инициировать отправку при ENTERнажатии.

[Обновить]

Несмотря на то, что я нашел ответ (или лучше: один) сам, кажется, есть место для вариаций;)

Есть ли разница между keyCodeи which- особенно если я просто ищу ENTER, который никогда не будет ключом Unicode?

Некоторые браузеры предоставляют одно свойство, а другие предоставляют другое?

19.11.2008 14:59:19
** Если кто-то достиг этого от Google (как я), знайте, что «keyup» вместо «keypress» работает в Firefox, IE и Chrome. "keypress", видимо, работает только в Firefox.
Tyler 22.11.2009 03:05:50
Кроме того, «keydown» работает лучше, чем «keyup» для запуска события ПОСЛЕ нажатия клавиши (очевидно), но это важно, если вы говорите, что хотите инициировать событие на ВТОРОМ забое, если текстовая область пуста
Tyler 22.11.2009 05:39:50
Что касается e.keyCode VS e.which ... Из моих тестов Chrome и IE8: обработчик keypress () будет запускаться только для обычных символов (т.е. не Up / Down / Ctrl), а также для e.keyCode и e. который вернет код ASCII. Однако в Firefox все клавиши будут вызывать нажатие клавиш (), НО: для обычных символов e.which вернет код ASCII и e.keyCode вернет 0, а для специальных символов (например, Up / Down / Ctrl) e.keyCode вернет код клавиатуры и е. который вернет 0. Как весело.
jackocnr 25.05.2010 18:10:54
Предупреждение: не используйте тот из кода Google. Автор jquery выпустил патч, который есть только в репозитории github (и на форке Джона Резига): github.com/tzuryby/jquery.hotkeys . Один из кода Google ведет себя неправильно, когда привязывает более одного ключевого события к одному и тому же узлу dom. Новый решает это.
Daniel Ribeiro 29.08.2010 00:58:31
«keyup» срабатывает очень и очень поздно, например, если вы долго нажимаете клавишу. См. Здесь jsbin.com/aquxit/3/edit, чтобы можно было использовать
Toskan 8.10.2012 11:03:41
24 ОТВЕТА
РЕШЕНИЕ

На самом деле это лучше:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
843
3.10.2013 11:21:14
if ((e.keyCode || e.which) == 13)? ;)
Kezzer 1.04.2010 15:43:29
Согласно комментарию, приведенному ниже на этой странице, jQuery нормализуется таким образом, чтобы «которое» определялось для объекта события каждый раз. Таким образом, проверка «keyCode» должна быть ненужной.
Ztyx 22.06.2010 14:58:17
Почему огромное количество голосов? Речь идет о jQuery, который нормализует эти вещи, поэтому нет необходимости использовать что-либо кромеe.which того, какое событие вы используете.
Tim Down 25.01.2011 12:33:56
@Tim: Увы, я только что протестировал это с Firefox, используя api.jquery.com/keypress : когда я нажимаю <Tab>, e.whichне устанавливается (остается 0), но e.keyCodeесть ( 9). См. Stackoverflow.com/questions/4793233/… почему это важно.
Marcel Korpel 25.01.2011 12:37:47
@Marcel: Да, обработка ключей в jQuery имеет недостатки, и это неудачный пример, но для клавиши Enter, о которой спрашивает этот вопрос, ситуация предельно проста.
Tim Down 25.01.2011 12:40:41

Хорошо, я был слепым

e.which

будет содержать код ASCII ключа.

Смотрите https://developer.mozilla.org/En/DOM/Event.which

6
19.11.2008 16:50:47

Попробуй это

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
132
19.11.2008 15:05:29
@VladimirPrudnikov О, о, аааа! Ааа! по этой ссылке были все Маки - человечество !!!
Ben DeMott 6.07.2012 20:41:04
Что ж, мы также запустили новую версию с приложением для Windows .. посмотрите snippets.me
Vladimir Prudnikov 9.07.2012 12:59:55
@VladimirPrudnikov Как насчет версии для Linux?
Arda 12.09.2012 07:19:54
@ Арда, у нас нет планов на версию для Linux. Будет веб-приложение и публичный API, так что, может быть, кто-то его создаст :)
Vladimir Prudnikov 13.09.2012 10:07:34
Ха-ха-ха, инструмент для разработчиков без планов для Linux. Богатые!
Ziggy 17.12.2013 18:00:49

Если вы используете 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
61
4.09.2016 07:22:41
Исправление это * $. Ui.keyCode.ENTER **, а не * $. KeyCode.ENTER - работает, как талисман, хотя спасибо за совет!
daniellmb 2.09.2009 19:12:08
Uncaught TypeError: String.charCodeAt is not a functionЯ думаю, что вы хотели сказать'\r'.charCodeAt(0) == 13
Patrick Roberts 15.09.2015 21:46:27
$(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();
    });
});

Надеюсь, это поможет вам !!!

14
17.02.2009 11:18:17

Попробуй это:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
-9
26.05.2011 21:35:45

Вот подробное описание поведения различных браузеров http://unixpapa.com/js/key.html

6
5.03.2010 17:41:17
Это абсолютно та страница, которую должны читать все, блуждающие вокруг и дающие безнадежные ответы.
Tim Down 25.01.2011 12:31:55

Учитывая, что вы используете jQuery, вы должны использовать .which. Да, разные браузеры устанавливают разные свойства, но jQuery нормализует их и устанавливает значение .which в каждом случае. См. Документацию по адресу http://api.jquery.com/keydown/ :

Чтобы определить, какая клавиша была нажата, мы можем исследовать объект события, который передается в функцию-обработчик. Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует свойство .which, поэтому мы можем надежно использовать его для получения кода ключа.

39
5.03.2010 17:47:19
Из того, что я видел, использование event.which и попытка сравнения с $ .ui.keyCode приводит к неопределенному поведению. В частности, строчные клавиши [L], которые отображаются на $ .ui.keyCode.NUMPAD_ENTER. Милый.
Danny 14.06.2010 18:26:36
У вас есть репродукция, демонстрирующая эту ошибку? Желательно сообщать об этом владельцам jQuery, а не пытаться переопределить их работу.
Frank Schwieterman 18.01.2011 20:40:57
 // 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');
     }
 });
28
19.09.2015 14:35:34
Это настоящий ответ. Принятый будет работать для некоторых ключей (например, ввод), но не для других (например, supr, который будет ошибочно принят.)
Oscar Foley 14.05.2010 16:31:35
Это прямая вставка из источника jQuery, и это код, который jQuery использует для нормализации свойства события .which.
Ian Clelland 7.07.2010 23:08:39
@Ian Clelland: я не могу понять вашу точку зрения, это работает правильно или нет !? LOL
Luca Filosofi 9.11.2010 12:06:02
Это работает; Я уверен в этом, потому что jQuery использует именно этот код :) Если у вас уже есть jQuery, просто используйте его - вам не нужно иметь это в своем собственном коде.
Ian Clelland 10.11.2010 18:51:48
@aSeptik: Вопрос был: «У меня есть jQuery; как мне нажать клавишу» - ваш ответ показывает, как jQuery получает его в первую очередь. Я хотел сказать, что, поскольку jQuery уже содержит эту строку кода, он ему не нужен. Он может просто использовать event.which.
Ian Clelland 21.02.2013 17:52:13

... этот пример предотвращает отправку формы (обычно основное намерение при захвате нажатия клавиши # 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
31
9.08.2013 20:37:12

Проверьте отличный плагин jquery.hotkeys, который поддерживает комбинации клавиш:

$(document).bind('keydown', 'ctrl+c', fn);
22
11.01.2016 22:58:47

Добавьте скрытую отправку, а не тип скрытой, просто отправьте с style = "display: none". Вот пример (удалены ненужные атрибуты из кода).

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

он принимает ключ ввода изначально, не требует JavaScript, работает в любом браузере.

4
19.04.2011 14:54:20

Ведьма;)

/*
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/

4
24.04.2013 22:44:04

Согласно ответу Килиана:

Если важен только ввод, нажмите клавишу:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
2
14.09.2011 10:37:53
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

Вы должны иметь firbug, чтобы увидеть результат в консоли

3
1.03.2012 17:07:40

Самый простой способ, который я делаю, это:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
2
16.12.2011 14:48:16
Было бы лучше использовать 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.
zanetu 16.09.2013 20:39:46

Я просто дополню код решения этой строкой e.preventDefault();. В случае ввода поля формы мы не посещаем, чтобы отправить на нажатой клавишу ввода

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
5
10.02.2012 19:59:42

Вот расширение 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/

4
12.10.2012 16:36:36

редактировать: это работает только для 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
    }
});

Вот шпаргалка с сопоставленными ключами, которые я получил из этого блога введите описание изображения здесь

26
16.12.2013 03:50:50
Там нет e.keyсобственности.
SLaks 7.02.2013 20:47:58
Хм, похоже, это специфическое свойство IE. Это работает для моего приложения в IE, но не в Chrome. Думаю, я использую код ключа.
Kevin 8.02.2013 00:47:13

Некоторые браузеры используют keyCode, другие используют который. Если вы используете jQuery, вы можете надежно использовать то, что jQuery стандартизирует. Фактически,

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});
3
16.04.2015 03:26:35

Я только что сделал плагин для JQuery, который позволяет более легкие keypressсобытия. Вместо того, чтобы найти номер и вставить его, все, что вам нужно сделать, это:

Как это использовать

  1. Включите код, который я имею ниже
  2. Запустите этот код:
$(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

2
30.06.2015 07:42:32
Вы можете сделать функцию намного короче и быстрее, если не используете миллионы сравнений "если" -> jsfiddle.net/BlaM/bcguctrx - Также имейте в виду, что - например - openbracket и closebracket не являются открытыми / закрытыми скобками на Немецкая клавиатура.
BlaM 1.07.2015 11:47:31
Мне понравилось это решение. отлично.
Jay 1.09.2017 15:22:18

Это почти полный список ключевых кодов:

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"
12
6.08.2017 16:55:01

Используйте 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...
    }
});

Mozilla Docs

Поддерживаемые браузеры

4
18.02.2018 19:24:23

То 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

0
6.11.2019 06:44:51