jQuery ईवेंट कीपर: किस कुंजी को दबाया गया था?

706

JQuery के साथ, मैं कैसे पता लगाऊं कि जब मैं कीप इवेंट में बंधता हूं तो किस कुंजी को दबाया गया था?

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

जब मुझे ENTERदबाया जाता है तो मैं एक जमा को ट्रिगर करना चाहता हूं ।

[अपडेट करें]

भले ही मैंने पाया (या बेहतर: एक) अपने आप को जवाब दें, ऐसा लगता है कि भिन्नता के लिए कुछ जगह है;)

क्या कोई अंतर है keyCodeऔर which- विशेष रूप से अगर मैं सिर्फ तलाश कर रहा हूं ENTER, जो एक यूनिकोड कुंजी नहीं होगी?

क्या कुछ ब्राउज़र एक संपत्ति प्रदान करते हैं और अन्य एक दूसरे को प्रदान करते हैं?

javascript  jquery  events  bind  keypress 
— Blam
स्रोत
295
** यदि कोई भी Google (जैसे मैंने किया था) से इस तक पहुँच गया है, तो यह जान लें कि फ़ायरफ़ॉक्स, IE और क्रोम में "कीपर" के बजाय "कीप" काम करता है। "कीपर" स्पष्ट रूप से केवल फ़ायरफ़ॉक्स में काम करता है।
— टायलर
17
भी, "keydown" एक घटना ट्रिगर करने के बाद कुंजी दबाया गया है (जाहिर है) के लिए "KeyUp" की तुलना में बेहतर काम करता है, लेकिन यह महत्वपूर्ण है अगर आप कहते हैं कि दूसरा बैकस्पेस पर घटना ट्रिगर करना चाहते हैं, तो एक पाठ क्षेत्र खाली है
— टायलर
12
जैसा कि e.keyCode VS e.which ... मेरे परीक्षणों से, Chrome और IE8: कीपर () हैंडलर केवल सामान्य वर्णों के लिए ट्रिगर हो जाएगा (अर्थात अप / डाउन / Ctrl नहीं), और e.keyCode और e दोनों। जो ASCII कोड लौटाएगा। फ़ायरफ़ॉक्स में हालांकि, सभी कुंजियाँ कीपर को ट्रिगर करेंगी (), लेकिन: सामान्य अक्षरों के लिए e.which ASCII कोड लौटाएगा और e.keyCode 0 वापस आएगा, और विशेष वर्णों के लिए (जैसे / ऊपर / नीचे / Ctrl) e.keyCode वापस आएगा। कीबोर्ड कोड, और e.which 0. कैसे मजेदार होगा।
— कटहल
4
चेतावनी: Google कोड से एक का उपयोग न करें। Jquery के लेखक ने एक पैच को प्रस्तुत किया, जो केवल गिथूब रिपॉजिटरी (और जॉन रेसिग के कांटे के रूप में) पर है: github.com/tzuryby/jquery.hotkeys । जब एक से अधिक महत्वपूर्ण ईवेंट एक ही डोम नोड में बाइंड करते हैं, तो Google कोड से दुर्व्यवहार करता है। नया उसे हल करता है।
— डैनियल रिबेरो
4
जब आप एक लंबे समय के लिए एक कुंजी दबाते हैं तो "कीप" बहुत देर से शुरू हो जाएगा। यहाँ देखें jsbin.com/aquxit/3/edit तो कीडाउन जाने का रास्ता है
— तोस्कान

जवाबों:

844

वास्तव में यह बेहतर है:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
— एरण गैलपरिन
स्रोत
84
if (e.keyCode || e.which) == 13)? ;)
— केजर
49
इस पृष्ठ पर एक और टिप्पणी के अनुसार, jQuery सामान्य करता है ताकि हर बार ईवेंट ऑब्जेक्ट पर 'जो' परिभाषित हो। इसलिए, 'कीकोड' की जाँच अनावश्यक होनी चाहिए।
— जिट्क्स
197
क्यों भारी उलटी गिनती? सवाल jQuery के बारे में है, जो इस सामान को सामान्य करता है, इसलिए जो भी आप उपयोग कर रहे हैं, उसके अलावा कुछ भी उपयोग करने की आवश्यकता नहीं हैe.which ।
— टिम डाउन
48
@ समय: काश, मैं सिर्फ फ़ायरफ़ॉक्स के साथ api.jquery.com/keypress का उपयोग करके यह परीक्षण करता था : जब मैं <टैब> दबाता हूं, e.whichतो सेट नहीं होता है (रहता है 0), लेकिन e.keyCode( 9) है। Stackoverflow.com/questions/4793233/ पर देखें कि यह क्यों मायने रखता है।
— मार्सेल कोर्पेल
3
@ मार्सेल: हां, jQuery की कुंजी हैंडलिंग में कमियां हैं और यह एक दुर्भाग्यपूर्ण उदाहरण है, लेकिन Enter कुंजी के लिए, जो यह सवाल पूछ रहा है, उसके बारे में स्थिति बेहद सरल है।
— टिम डाउन
133

इसे इस्तेमाल करे

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
— व्लादिमीर प्रुडनिकोव
स्रोत
5
@VladimirPrudnikov ओह, ओह, अहह! आह! उस लिंक पर मैक के सर्वत्र थे - मानवता !!!
— बेन डीमॉट
1
ठीक है, हम विंडोज अनुप्रयोग के साथ एक नया संस्करण भी शुरू की .. की जाँच snippets.me
— व्लादिमीर Prudnikov
2
@VladimirPrudnikov एक लिनक्स संस्करण के बारे में कैसे?
— अरदा
@ हमारे पास लिनक्स संस्करण की कोई योजना नहीं है। एक वेब ऐप और एक सार्वजनिक एपीआई होगा, इसलिए, हो सकता है कि कोई व्यक्ति इसे बनाएगा :)
— व्लादिमीर प्रुडनिकोव
1
हा हा हा, एक डेवलपर टूल जिसमें लिनक्स के लिए कोई योजना नहीं है। धनी!
— जिग्गी
61

यदि आप 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
— user35612
स्रोत
13
सुधार यह * $। Ui.keyCode.ENTER ** नहीं * $ है। keyCode.ENTER - टिप के लिए यद्यपि thx एक आकर्षण की तरह काम करता है!
— डेनिलेम्ब
Uncaught TypeError: String.charCodeAt is not a functionमुझे लगता है कि आपके कहने का मतलब है'\r'.charCodeAt(0) == 13
— पैट्रिक रॉबर्ट्स
39

यह देखते हुए कि आप jQuery का उपयोग कर रहे हैं, आपको पूरी तरह से उपयोग करना चाहिए। हां अलग-अलग ब्राउज़र अलग-अलग गुण सेट करते हैं, लेकिन jQuery उन्हें सामान्य करेगा और प्रत्येक मामले में .which मान सेट करेगा। पर documetation देखें 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
    }
});

यहां मैप की गई चाबियों के साथ एक धोखा शीट है जो मुझे इस ब्लॉग से मिली है यहां छवि विवरण दर्ज करें

— केविन
स्रोत
5
कोई e.keyसंपत्ति नहीं है।
— SLAs
3
हम्म, ऐसा लगता है कि यह एक IE विशिष्ट संपत्ति है। यह IE में मेरे ऐप के लिए काम करता है लेकिन क्रोम नहीं। मुझे लगता है मैं कीकोड का उपयोग कर रहा हूँ।
— केविन
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
यही असली जवाब है। स्वीकृत व्यक्ति कुछ कुंजियों के लिए काम करेगा (जैसे दर्ज करें) लेकिन दूसरों के लिए असफल हो जाएगा (जैसे कि सुपर कि गलती से होगा।)
— ऑस्कर फोली
19
यह jQuery स्रोत से एक सीधा पेस्ट है, और यह कोड है जो jQuery का उपयोग करता है।
— इयान क्लेलैंड
@ इयान क्लेलैंड: मैं आपकी बात समझ नहीं सकता, क्या यह सही काम कर रहा है या नहीं !? लोल
— लुका फिलोसोफी
13
यह वास्तव में कारगर है; मुझे इस पर यकीन है, क्योंकि jQuery बिल्कुल उस कोड का उपयोग करता है :) यदि आपके पास पहले से ही jQuery उपलब्ध है, तो बस इसका उपयोग करें - आपको अपने कोड में यह करने की आवश्यकता नहीं है।
— इयान क्लेलैंड 18
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

छिपा हुआ जमाव जोड़ें, छिपा हुआ नहीं, बस शैली के साथ सादा प्रस्तुत करें = "प्रदर्शन: कोई नहीं"। यहां एक उदाहरण है (कोड से अनावश्यक विशेषताओं को हटा दिया गया है)।

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

यह मूल कुंजी दर्ज करना स्वीकार करेगा, जावास्क्रिप्ट की कोई आवश्यकता नहीं है, हर ब्राउज़र में काम करता है।

— Pedja
स्रोत
4

यहां एक जेकरी एक्सटेंशन है जो एंटर कुंजी दबाए जाने को संभाल लेगा।

(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और आधुनिक जेएस!

अब कोई संख्या कोड नहीं। आप सीधे कुंजी की जांच कर सकते हैं। उदाहरण के लिए "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...
    }
});

मोज़िला डॉक्स

ब्राउज़रों का समर्थन किया

— Gibolt
स्रोत
3 
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

कंसोल में एक परिणाम देखने के लिए आपके पास फ़र्बग होना चाहिए

— मैनी
स्रोत
3

कुछ ब्राउज़र कीकोड का उपयोग करते हैं, कुछ अन्य का उपयोग करते हैं। यदि आप 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 एपीआई :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 दबाया जाता है।)

उदाहरण / कोड:

कोड स्निपेट दिखाएं

क्योंकि लंबा संस्करण ऐसा है ... अच्छा ... लंबा है, मैंने इसके लिए एक पेस्टबिन लिंक बनाया है:
http://pastebin.com/VUaDevz1

— जच बरहम
स्रोत
आप फ़ंक्शन को बहुत छोटा और तेज़ बना सकते हैं यदि आप लाखों का उपयोग नहीं करते हैं अगर "तुलना" -> jsfiddle.net/BlaM/bcguctrx - यह भी जान लें कि - उदाहरण के लिए - ओपनबर्केट और क्लोजर ब्रैकेट खुले नहीं हैं / एक पर करीब कोष्ठक जर्मन कीबोर्ड `।
— BlaM
मुझे यह समाधान पसंद आया। अच्छा।
— जे
0

event.keyCodeऔर event.whichdepracated कर रहे हैं। @Gibolt उत्तर को ऊपर देखें या दस्तावेज़ीकरण देखें: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key इसके बजाय उपयोग किया जाना चाहिए

keypressघटना में अच्छी तरह से depracated है: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

— bakrall
स्रोत
-9

इसे इस्तेमाल करे:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
— उमर यपेज़
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.