javascript - jQuery इवेंट कीप्रेस: कौन सी कुंजी दबाई गई थी?
events bind (16)
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...
}
});
JQuery के साथ, जब मैं कुंजीपटल ईवेंट से जुड़ता हूं तो मुझे यह कैसे पता चलेगा कि कौन सी कुंजी दबाई गई थी?
$('#searchbox input').bind('keypress', function(e) {});
जब एंटर दबाया जाता है तो मैं एक सबमिट ट्रिगर करना चाहता हूं।
[अद्यतन करें]
भले ही मैंने पाया (या बेहतर: एक) खुद को जवाब देता है, भिन्नता के लिए कुछ जगह प्रतीत होती है;)
क्या keyCode
बीच कोई अंतर है और which
- विशेष रूप से यदि मैं केवल ENTER की तलाश में हूं, जो कभी यूनिकोड कुंजी नहीं होगा?
क्या कुछ ब्राउज़र एक संपत्ति प्रदान करते हैं और अन्य दूसरे को प्रदान करते हैं?
... यह उदाहरण फॉर्म सबमिशन को रोकता है (कुंजीस्ट्रोक # 13 को कैप्चर करते समय नियमित रूप से मूल मंशा):
$('input#search').keypress(function(e) {
if (e.which == '13') {
e.preventDefault();
doSomethingWith(this.value);
}
});
इसे इस्तेमाल करे
$('#searchbox input').bind('keypress', function(e) {
if(e.keyCode==13){
// Enter pressed... do anything here...
}
});
इसे इस्तेमाल करे:
jQuery('#myInput').keypress(function(e) {
code = e.keyCode ? e.keyCode : e.which;
if(code.toString() == 13) {
alert('You pressed enter!');
}
});
किलियन के जवाब के अनुसार:
अगर केवल कुंजी-प्रेस दर्ज करना महत्वपूर्ण है:
<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
कुछ ब्राउज़र कुंजीकोड का उपयोग करते हैं, अन्य लोग इसका उपयोग करते हैं। यदि आप jQuery का उपयोग कर रहे हैं, तो आप विश्वसनीय रूप से उपयोग कर सकते हैं क्योंकि jQuery चीजों को मानकीकृत करता है। वास्तव में,
$('#searchbox input').bind('keypress', function(e) {
if(e.keyCode==13){
}
});
छुपाएं सबमिट करें, छुपाएं टाइप न करें, बस सादा = "प्रदर्शन: कोई नहीं" के साथ सबमिट करें। यहां एक उदाहरण दिया गया है (कोड से अनावश्यक विशेषताओं को हटा दिया गया है)।
<form>
<input type="text">
<input type="submit" style="display:none">
</form>
यह प्रवेश कुंजी को मूल रूप से स्वीकार करेगा, जावास्क्रिप्ट की कोई ज़रूरत नहीं है, हर ब्राउज़र में काम करता है।
ठीक है, मैं अंधेरा था:
e.which
कुंजी के ASCII कोड होगा।
मैंने अभी 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"
दबाया जाता है जब ए दबाया जाता है, CTRL (नियंत्रण) दबाए जाने पर आग लगने के लिए "ctrl"
, या, किसी संख्या के मामले में, केवल 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>
क्योंकि लंबा संस्करण इतना है ... अच्छा ... लंबा, मैंने इसके लिए एक पेस्टबिन लिंक बनाया है:
http://pastebin.com/VUaDevz1
यदि आप jQuery UI का उपयोग कर रहे हैं तो आपके पास सामान्य कुंजी कोड के लिए अनुवाद हैं। ui/ui/ui.core.js :
$.ui.keyCode = {
...
ENTER: 13,
...
};
परीक्षण / अनुकरण / jquery.simulate.js में कुछ अनुवाद भी हैं लेकिन मुझे कोर जेएस लाइब्रेरी में कोई भी नहीं मिला। आपको याद है, मैंने केवल स्रोतों को grep'ed। शायद इन जादू संख्याओं से छुटकारा पाने के लिए कुछ और तरीका है।
आप स्ट्रिंग.charCodeAt और .fromCharCode का भी उपयोग कर सकते हैं:
>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
यह देखते हुए कि आप jQuery का उपयोग कर रहे हैं, आपको बिल्कुल उपयोग करना चाहिए। जो। हां अलग-अलग ब्राउज़र अलग-अलग गुण सेट करते हैं, लेकिन jQuery उन्हें सामान्यीकृत करेगा और प्रत्येक मामले में। वैच वैल्यू सेट करेगा। Http://api.jquery.com/keydown/ पर ड्यूमेटेशन http://api.jquery.com/keydown/ यह कहता है:
यह निर्धारित करने के लिए कि कौन सी कुंजी दबाई गई थी, हम हैंडलर फ़ंक्शन में पारित ईवेंट ऑब्जेक्ट की जांच कर सकते हैं। जबकि ब्राउजर इस जानकारी को स्टोर करने के लिए अलग-अलग गुणों का उपयोग करते हैं, jQuery jQuery की संपत्ति को सामान्यीकृत करता है ताकि हम विश्वसनीय कोड को पुनः प्राप्त करने के लिए इसका उपयोग कर सकें।
यहां एक 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/
सबसे आसान तरीका है कि मैं करता हूं:
$("#element").keydown(function(event) {
if (event.keyCode == 13) {
localiza_cep(this.value);
}
});
http://unixpapa.com/js/key.html विभिन्न ब्राउज़रों के व्यवहार का एक लंबा विवरण यहां दिया गया है
$(document).bind('keypress', function (e) {
console.log(e.which); //or alert(e.which);
});
कंसोल में परिणाम देखने के लिए आपको फ़िरबग होना चाहिए
$(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();
});
});
उम्मीद है कि यह आपकी मदद कर सकता है !!!