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

706

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

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

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

[Обновить]

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

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

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

Бламу
источник
295
** Если кто-то достиг этого от Google (как я), знайте, что «keyup» вместо «keypress» работает в Firefox, IE и Chrome. "keypress", видимо, работает только в Firefox.
Тайлер
17
Кроме того, «keydown» работает лучше, чем «keyup» для запуска события ПОСЛЕ нажатия клавиши (очевидно), но это важно, если вы говорите, что хотите инициировать событие на ВТОРОМ забое, если текстовая область пуста
Тайлер
12
Что касается 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
4
Предупреждение: не используйте тот из кода Google. Автор jquery выпустил патч, который есть только в репозитории github (и на форке Джона Резига): github.com/tzuryby/jquery.hotkeys . Один из кода Google ведет себя неправильно, когда привязывает более одного ключевого события к одному и тому же узлу dom. Новый решает это.
Даниэль Рибейро
4
«keyup» срабатывает очень и очень поздно, например, если вы долго нажимаете клавишу. См. Здесь jsbin.com/aquxit/3/edit, чтобы можно было использовать
keydown

Ответы:

844

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

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
Эран Гальперин
источник
84
if ((e.keyCode || e.which) == 13)? ;)
Кеззер
49
Согласно комментарию, приведенному ниже на этой странице, jQuery нормализуется таким образом, что каждый раз определяется объект «которое» для объекта события. Таким образом, проверка «keyCode» должна быть ненужной.
Ztyx
197
Почему огромное количество голосов? Речь идет о jQuery, который нормализует эти вещи, поэтому нет необходимости использовать что-либо кромеe.which того, какое событие вы используете.
Тим Даун
48
@Tim: Увы, я только что протестировал это с Firefox, используя api.jquery.com/keypress : когда я нажимаю <Tab>, e.whichне устанавливается (остается 0), но e.keyCodeесть ( 9). См. Stackoverflow.com/questions/4793233/… почему это важно.
Марсель Корпель
3
@Marcel: Да, обработка ключей в jQuery имеет недостатки, и это неудачный пример, но для клавиши Enter, о которой спрашивает этот вопрос, ситуация предельно проста.
Тим Даун
133

Попробуй это

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
Владимир Прудников
источник
5
@VladimirPrudnikov О, о, аааа! Ааа! по этой ссылке были все Маки - человечество !!!
Бен ДеМотт
1
Что ж, мы также запустили новую версию с приложением для Windows .. проверьте snippets.me
Владимир Прудников
2
@VladimirPrudnikov Как насчет версии для Linux?
Арда
@ Арда, у нас нет планов на версию для Linux. Будет веб-приложение и публичный API, так что, может быть, кто-то его создаст :)
Владимир Прудников
1
Ха-ха-ха, инструмент для разработчиков без планов для Linux. Богатые!
Зигги
61

Если вы используете 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
user35612
источник
13
Исправление это * $. Ui.keyCode.ENTER **, а не * $. KeyCode.ENTER - работает, как талисман, хотя спасибо за совет!
daniellmb
Uncaught TypeError: String.charCodeAt is not a functionЯ думаю, что вы хотели сказать'\r'.charCodeAt(0) == 13
Патрик Робертс
39

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

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

Фрэнк Швитерман
источник
2
Из того, что я видел, использование event.which и попытка сравнения с $ .ui.keyCode приводит к неопределенному поведению. В частности, строчные клавиши [L], которые отображаются на $ .ui.keyCode.NUMPAD_ENTER. Милый.
Дэнни
4
У вас есть репродукция, демонстрирующая эту ошибку? Желательно сообщать об этом владельцам jQuery, а не пытаться переопределить их работу.
Франк Швитерман
31

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

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
user184365
источник
28

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

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

Kevin
источник
5
Там нет e.keyсобственности.
SLaks
3
Хм, похоже, это специфическое свойство IE. Это работает для моего приложения в IE, но не в Chrome. Думаю, я использую код ключа.
Кевин
28
 // 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');
     }
 });
Лука Философи
источник
1
Это настоящий ответ. Принятый будет работать для некоторых ключей (например, ввод), но не для других (например, supr, который будет ошибочно принят.)
Оскар Фоли
19
Это прямая вставка из источника jQuery, и это код, который jQuery использует для нормализации свойства события .which.
Ян Клелланд
@Ian Clelland: я не могу понять вашу точку зрения, это работает правильно или нет !? LOL
Luca Filosofi
13
Это работает; Я уверен в этом, потому что jQuery использует именно этот код :) Если у вас уже есть jQuery, просто используйте его - вам не нужно иметь это в своем собственном коде.
Ян Клелланд
1
@aSeptik: Вопрос был: «У меня есть jQuery; как мне нажать клавишу» - ваш ответ показывает, как jQuery получает его в первую очередь. Я хотел сказать, что, поскольку jQuery уже содержит эту строку кода, он ему не нужен. Он может просто использовать event.which.
Ян Клелланд
14
$(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();
    });
});

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


источник
12

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

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"
Иван
источник
6

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

Фил
источник
2
Это абсолютно та страница, которую должны читать все, блуждающие вокруг и дающие безнадежные ответы.
Тим Даун
5

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

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
dzona
источник
4

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

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

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

Педья
источник
4

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

Ведьма;)

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

molokoloco
источник
4

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

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

Gibolt
источник
3
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

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

Manny
источник
3

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

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

    }
});
Хитеш Модха
источник
2

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

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

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>

источник
2

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

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
Родольфо Хорхе Немер Ногейра
источник
1
Было бы лучше использовать 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
2

Я только что сделал плагин для 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

Зак Бархам
источник
Вы можете сделать функцию намного короче и быстрее, если не используете миллионы сравнений "если" -> jsfiddle.net/BlaM/bcguctrx - Также имейте в виду, что - например - openbracket и closebracket не являются открытыми / закрытыми скобками на Немецкая клавиатура`
BlaM
Мне понравилось это решение. отлично.
Джей
-9

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

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
Омар Йепез
источник