JQuery ile, keypress olayına bağlandığımda hangi tuşa basıldığını nasıl öğrenebilirim?

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

ENTERBasıldığında bir gönderimi tetiklemek istiyorum .

[Güncelleme]

Kendim (veya daha iyisi: bir) cevabı bulduğum halde, varyasyon için bir yer var gibi görünüyor;)

Arasında bir fark var mı keyCodeve which- Sadece arıyorum özellikle ENTERunicode anahtarı asla, hangi?

Bazı tarayıcılar bir mülk, diğerleri ise diğer mülkleri sağlıyor mu?

Aslında bu daha iyi:

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

Bunu dene

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

JQuery UI kullanıyorsanız, ortak anahtar kodları için çevirileriniz vardır. Gelen ui / ui / ui.core.js :

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

Testler / simulate / jquery.simulate.js'de bazı çeviriler de var, ancak çekirdek JS kütüphanesinde bulamadım. Dikkat et, ben sadece kaynakları gittim. Belki de bu sihirli sayılardan kurtulmanın başka bir yolu var.

String.charCodeAt ve .fromCharCode öğelerini de kullanabilirsiniz:

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

JQuery kullandığınız göz önüne alındığında, kesinlikle .which kullanmalısınız. Evet, farklı tarayıcılar farklı özellikler ayarlar, ancak jQuery bunları normalleştirir ve her durumda .which değerini ayarlar. Http://api.jquery.com/keydown/ adresindeki belgelere bakın :

Hangi tuşa basıldığını belirlemek için, işleyici işlevine iletilen olay nesnesini inceleyebiliriz. Tarayıcılar bu bilgileri saklamak için farklı özellikler kullanırken, jQuery .which özelliğini normalleştirir, böylece anahtar kodunu almak için güvenilir bir şekilde kullanabiliriz.

... bu örnek form gönderilmesini önler (tuş vuruşu # 13'ü yakalarken düzenli olarak temel niyet):

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

edit: Bu sadece IE için çalışıyor ...

Bunun eski bir gönderi olduğunu anlıyorum, ancak birisi bunu faydalı bulabilir.

Anahtar olaylar eşlenir, bu nedenle anahtar kodu değerini kullanmak yerine anahtar değerini biraz daha okunabilir hale getirmek için de kullanabilirsiniz.

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

İşte bu blogdan aldığım eşlenmiş anahtarları içeren bir hile sayfası

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

Anahtar kombinasyonlarını destekleyen mükemmel jquery.hotkeys eklentisine göz atın :

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

Umarım bu size yardımcı olabilir !!!

Bu neredeyse keyCodes'un tam listesi:

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"

Tamam, kördüm:

e.which

anahtarın ASCII kodunu içerecektir.

Bkz. Https://developer.mozilla.org/En/DOM/Event.which

Çeşitli tarayıcıların davranışlarının uzun bir açıklaması http://unixpapa.com/js/key.html

Çözüm kodunu bu satırla tamamlayacağım e.preventDefault();. Formun giriş alanı durumunda, enter tuşuna basıldığında göndermeye katılmayız

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

Gizli gönderme ekleyin, gizli yazın, sadece style = "display: none" ile düz gönderin. İşte bir örnek (koddan gereksiz öznitelikler kaldırıldı).

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

enter anahtarını yerel olarak kabul edecektir, JavaScript'e gerek yoktur, her tarayıcıda çalışır.

Burada, basılan enter tuşunu işleyecek bir jquery uzantısı var.

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

Çalışan bir örnek burada bulunabilir http://jsfiddle.net/EnjB3/8/

Cadı;)

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

Demo: http://jsfiddle.net/molokoloco/hgXyq/24/

Kullanın event.keyve modern JS!

Artık sayı kodu yok. Anahtarı doğrudan kontrol edebilirsiniz. Örneğin "Enter", "LeftArrow", "r"ya da "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 Belgeleri

Desteklenen Tarayıcılar

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

});

Konsolda bir sonuç görmek için firbug'a sahip olmalısınız

Bazı tarayıcılarda keyCode kullanılırken, diğerleri hangisini kullanır. JQuery kullanıyorsanız, jQuery gibi şeyleri standartlaştırırken güvenilir bir şekilde kullanabilirsiniz. Aslında,

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

    }
});

Kilian'ın cevabına göre:

Eğer sadece girmek tuşuna basın önemlidir:

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

Yapmamın en kolay yolu:

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

Ben sadece daha kolay sağlayan jQuery için bir eklenti yaptık keypress olaylara . Numarayı bulup koymak yerine, tek yapmanız gereken şudur:

Bu nasıl kullanılır

1. Aşağıya sahip olduğum kodu dahil et
2. Bu kodu çalıştırın:

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

Bu kadar basit. Not Lütfen theKeyYouWantToFireAPressEventForolduğu değil bir sayı, ama bir dize (örneğin "a"ateşe A, basıldığında "ctrl"zaman yangına çok sayıda durumunda, basıldığında veya sadece , tırnak işaretleri. İşte o zaman ateş ediyorumCTRL (control)11 basılır.)

Örnek / Kod:

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>

Uzun sürüm çok ... iyi ... uzun olduğundan, bunun için bir PasteBin bağlantısı yaptım:
http://pastebin.com/VUaDevz1

event.keyCodeVe event.whichdepracated edilir. Yukarıdaki @Gololt cevabına bakın veya belgeleri kontrol edin: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key yerine kullanılmalı

keypressetkinlik de azaltıldı: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

Bunu dene:

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