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

629

С jQuery, как узнать, какой ключ был нажат, когда я привязываюсь к событию нажатия клавиши?

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

Я хочу вызвать submit при нажатии ENTER.

[Обновление]

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

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

Есть ли в некоторых браузерах одно свойство, а другие - другое?

  • 1
    или вы можете использовать это: github.com/jeresig/jquery.hotkeys :)
  • 293
    ** Если кто-то достиг этого от Google (как я), знайте, что «keyup» вместо «keypress» работает в Firefox, IE и Chrome. «keypress», видимо, работает только в Firefox.
Показать ещё 4 комментария
Теги:
events
bind
keypress

23 ответа

755
Лучший ответ

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

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
  • 83
    if ((e.keyCode || e.which) == 13)? ;)
  • 48
    Согласно комментарию, приведенному ниже на этой странице, jQuery нормализуется так, что каждый раз определяется объект «которое» для объекта события. Таким образом, проверка «keyCode» должна быть ненужной.
Показать ещё 15 комментариев
132

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

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
  • 6
    Эй, Райан, ты можешь использовать Сниппеты :)
  • 5
    @VladimirPrudnikov О, о, аааа! Ааа! по этой ссылке были все Маки - человечество !!!
Показать ещё 4 комментария
57

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

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

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

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

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

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
27
 // 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.
Показать ещё 6 комментариев
25

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
    }
});

Вот чит-лист с отображенными ключами, которые я получил из этого Изображение 2245

  • 5
    Там нет собственности e.key .
  • 3
    Хм, похоже, это специфическое свойство IE. Это работает для моего приложения в IE, но не в Chrome. Думаю, я использую код ключа.
Показать ещё 1 комментарий
20

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

$(document).bind('keydown', 'ctrl+c', fn);
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();
    });
});

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

6

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

  • 2
    Это абсолютно та страница, которую должны читать все, блуждающие вокруг и дающие безнадежные ответы.
6

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

e.which

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

См. https://developer.mozilla.org/En/DOM/Event.which

  • 0
    Ссылка не работает.
  • 0
    Это не работает для всех браузеров, если только не используется jQuery
5

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

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
4

Это в значительной степени полный список 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"
  • 2
    Проголосовал, как я знаю, мне нужно найти это снова.
  • 0
    Список можно найти, нажав любую клавишу на клавиатуре на keycode.info
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

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

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

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

3

В некоторых браузерах используется keyCode, другие используют. Если вы используете jQuery, вы можете надежно использовать это, поскольку jQuery стандартизирует вещи. На самом деле,

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

    }
});
3
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

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

3

Ведьма;)

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

2

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

  • 0
    Вы можете сделать функцию намного короче и быстрее, если не используете миллионы сравнений «если» -> jsfiddle.net/BlaM/bcguctrx - Также имейте в виду, что, например, openbracket и closebracket не являются открытыми / закрытыми скобками на Немецкая клавиатура`
  • 0
    Мне понравилось это решение. отлично.
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.
2

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

Если вводить только важно нажать клавишу

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

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

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

-9

Попробуйте следующее:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню