Як дізнатися, яка клавіша була натиснута, коли я прив'язуюсь до події натискання клавіші за допомогою 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
 }

Спробуйте це

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});

Якщо ви використовуєте інтерфейс jQuery, у вас є переклади для загальних кодів ключів. В ui / ui / ui.core.js :

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

Також є деякі переклади в тестах / simulate / jquery.simulate.js, але я не зміг знайти жодного в основній бібліотеці JS. Майте на увазі, я просто привітався з джерелами. Можливо, є якийсь інший спосіб позбутися цих магічних чисел.

Ви також можете використовувати String.charCodeAt та .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true

Враховуючи, що ви використовуєте jQuery, ви повинні абсолютно використовувати .which. Так, різні браузери встановлюють різні властивості, але jQuery їх нормалізує та встановить .which значення у кожному конкретному випадку. Дивіться документацію на веб-сайті http://api.jquery.com/keydown/, в якій зазначено:

Щоб визначити, яка клавіша була натиснута, ми можемо вивчити об'єкт події, який передається функції обробника. Хоча браузери використовують різні властивості для зберігання цієї інформації, jQuery нормалізує властивість .which, щоб ми могли надійно використовувати її для отримання ключового коду.

... цей приклад запобігає надсиланню форми (регулярно основний намір під час фіксації натискання клавіші №13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});

редагувати: Це працює лише для 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
    }
});

Ось чіт-лист із картами ключів, які я отримав з цього блогу

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

Отримайте відмінний плагін jquery.hotkeys, який підтримує комбінації клавіш:

$(document).bind('keydown', 'ctrl+c', fn);

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

Сподіваюся, це може вам допомогти !!!

Це майже повний список 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"

Гаразд, я був сліпим:

e.which

міститиме код ASCII ключа.

Дивіться https://developer.mozilla.org/En/DOM/Event.which

Ось детальний опис поведінки різних браузерів http://unixpapa.com/js/key.html

Я просто доповнити код рішення цим рядком e.preventDefault();. У разі введення форми форми ми не відвідуємо, щоб подати натиснутою клавішею Enter

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

Додайте приховане подання, а не тип прихованого, просто звичайне надсилання з style = "display: none". Ось приклад (видалено зайві атрибути з коду).

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

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

Ось розширення 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/

Відьма;)

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

Використовуйте 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

Підтримувані браузери

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

});

у вас повинна з’явитися виправна помилка, щоб побачити результат у консолі

Деякі браузери використовують keyCode, інші використовують який. Якщо ви використовуєте jQuery, ви можете надійно використовувати те, що як jQuery стандартизує речі. Насправді,

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

    }
});

Відповідно до відповіді Кіліана:

Якщо важливо лише ввести натискання клавіш:

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

Найпростіший спосіб, який я роблю, це:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});

Я тільки що зробив плагін для 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 натискається.)

Приклад / код:

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

event.keyCodeІ event.whichє depracated. Дивіться відповідь @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

Спробуйте це:

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