एक पाठ बॉक्स में Enter कुंजी पर जावास्क्रिप्ट के साथ एक बटन ट्रिगर पर क्लिक करें

Question

मेरे पास एक पाठ इनपुट और एक बटन है (नीचे देखें)। जब मैं टेक्स्ट बॉक्स के अंदर कुंजी दबाता हूं तो बटन के क्लिक इवेंट को ट्रिगर करने के लिए मैं जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं Enter?

मेरे वर्तमान पृष्ठ पर पहले से ही एक अलग सबमिट बटन है, इसलिए मैं बस बटन को सबमिट बटन नहीं बना सकता। और, मैं केवलEnter इस विशिष्ट बटन पर क्लिक करने के लिए कुंजी चाहता हूं यदि इसे इस एक पाठ बॉक्स के भीतर से दबाया जाता है, और कुछ नहीं।

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Comments

मेरे जैसे बदमाशों के लिए महत्वपूर्ण नोट: इस प्रश्न का मुख्य भाग यह है कि यदि आपके पास पहले से ही पृष्ठ पर एक फॉर्म है तो पहले से ही एक सबमिट बटन है। JQuery का उत्तर क्रॉस ब्राउज़र संगत और एक अच्छा समाधान है।

— जोशुआ डांस

@JoshuaDance, पहले से ही एक फॉर्म / सबमिट करने में कोई परेशानी नहीं है। एक पृष्ठ के कई रूप हो सकते हैं (लेकिन नेस्टेड नहीं), प्रत्येक का अपना जमा होना। प्रत्येक फॉर्म का प्रत्येक क्षेत्र केवल उस फॉर्म के सबमिट को ट्रिगर करेगा। जैसा कि इस उत्तर द्वारा बताया गया है ।

— फ्रेडेरिक

Answer 1

JQuery में, निम्नलिखित काम करेगा:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

या सादे जावास्क्रिप्ट में, निम्नलिखित काम करेगा:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Comments

यह शायद event.keyCode या event.charCode की तुलना में event.which को क्वेरी करने के लिए एक बेहतर अभ्यास है, डेवलपर

— विलियम नीयू

keydownkeyupउपयोग करने के लिए बेहतर घटना नहीं है। इसके अलावा, यदि आप asp.net का उपयोग कर रहे हैं, तो आपको return falseइस घटना को रोकने के लिए asp.net को रोकने के लिए अंत में होगा।

— अधिकतम

उपयोग करने keydownमें समस्या यह है कि एंटर दबाए रखने से ईवेंट बार-बार आग जाएगा। यदि आप keyupईवेंट में संलग्न होते हैं , तो कुंजी जारी होने के बाद ही यह आग लग जाएगी।

— स्टीव पॉलो

मैंने अपने कोड event.preventDefault();को click();फ़ंक्शन से पहले जोड़ने से जोड़ दिया है, जबकि मेरे पेज में एक फॉर्म है और मैंने इसके keyupसाथ स्विच किया है keypressक्योंकि यह मेरे लिए एकमात्र काम करने वाला हैंडलर था, वैसे भी कोड के साफ टुकड़े के लिए धन्यवाद!

— एड्रियन के।

निष्पक्ष होने के लिए, jQuery इस जवाब के पोस्ट होने पर JS बैक का बहुत अधिक पर्याय बन गया था। लेकिन अब हम में से बहुत से लोग जो jQuery से पूरी तरह से बचते हैं (क्योंकि यह सिर्फ kb की बर्बादी है जब आप कुछ ऐसा इस्तेमाल कर रहे हैं जैसे React) जब हम जेएस के सवालों के जवाब खोजते हैं तो गुस्सा आता है और अक्सर जो पहली चीज सामने आती है वह एक लाइब्रेरी है जो हम डॉन करते हैं 'पर निर्भर नहीं रहना चाहता।

— एंडी

Answer 2

तो बस में यह कोड!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Comments

हाँ, मैंने लगभग ऐसा ही किया था। मुझे लगता है कि यह सिर्फ एक व्यक्तिगत प्राथमिकता वाली बात है ... मुझे अधिक मॉड्यूलर दृष्टिकोण पसंद है। ;)

— kdenney

अगर आपको फ़ॉर्म जमा करने की आवश्यकता है: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'); क्लिक करें (); event.returnValit = false; event.cancel = true;}

— गेब्रियल चुंग

यह मेरे लिए इस तथ्य के कारण काम करता है कि इनलाइन पद्धति, इसमें समान कोड के साथ फ़ंक्शन को कॉल करने के बजाय, आपको कॉल पर झूठी वापसी करने और पोस्टबैक से बचने की अनुमति देता है। मेरे मामले में "क्लिक" विधि एक __doPostback async कॉल को आमंत्रित करती है और बिना "झूठे लौटें;" बस पृष्ठ को पुनः लोड करेगा।

— डेव

मैं सैम के साथ सहमत हूं, इस इनलाइन जेएस-कोड वाला कोड बदसूरत है। आपको हमेशा HTML और जावास्क्रिप्ट कोड अलग करने चाहिए।

— Sk8erPeter

@Sam कठपुतलियों से कभी अपना ज्ञान प्राप्त न करें । दर्द से डर पैदा होता है , और डर मन को मारने वाला होता है। डर वह छोटी-मृत्यु है जो कुल विस्मरण लाता है। मै अपने डर का सामना करुंगा। मैं इसे मुझ पर और मेरे माध्यम से पारित करने की अनुमति दूंगा। और जब यह अतीत हो गया है तो मैं इसका पथ देखने के लिए आंतरिक आंख को बंद कर दूंगा। भय निकल गया तो कुछ भी नहीं होगा। शायद इनलाइन घटना संचालकों को छोड़कर। तो, हाँ, कृपया अपने ईवेंट हैंडलर को अपने दृश्य / मार्कअप से अलग करें, जैसा कि यह उत्तर करता है । ; ^)

— रफिन

Answer 3

यह पता लगाया:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

Comments

ई = ई || window.event; // घटना को प्राप्त करने का सबसे छोटा तरीका

— विक्टर

सबसे अच्छा सादा जावास्क्रिप्ट विकल्प। जावास्क्रिप्ट को HTML में एक विशेषता के रूप में जोड़ा गया है जो अंतरिक्ष-खपत है, और jQuery सिर्फ jQuery है (संगतता की गारंटी नहीं है)। समाधान के लिए धन्यवाद!

— बॉक्सस्पा

और यदि आप झूठे के अंदर लौटते हैं, तो आप कुंजी को आगे संसाधित होने से बचा सकते हैं: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (घटना);" /> <इनपुट प्रकार = "बटन" आईडी = "btnSearch" मान = "खोज" onclick = "doSomething ();" /> <script> फ़ंक्शन searchKeyPress (e) {// खिड़की के लिए देखो। ईवेंट मामले में ईवेंट ई = ई में पारित नहीं होता है || window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch') पर क्लिक करें ()। विवरण झूठा है; } सच लौटना; } </ स्क्रिप्ट>

— जोस गोमेज़

Answer 4

बटन को सबमिट एलीमेंट बनाएं, ताकि यह ऑटोमैटिक हो जाए।

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

ध्यान दें कि <form>इस कार्य को करने के लिए आपको इनपुट फ़ील्ड वाले तत्व की आवश्यकता होगी (धन्यवाद सर्गेई इलिंस्की)।

यह मानक व्यवहार को फिर से परिभाषित करने के लिए एक अच्छा अभ्यास नहीं है, Enterकुंजी को हमेशा फॉर्म पर सबमिट बटन को कॉल करना चाहिए।

Comments

दोस्तों! पढ़िए उनका पूरा सवाल। पृष्ठ पर पहले से ही एक और सबमिट बटन है, इसलिए यह उसके लिए काम नहीं करेगा।

— आकाशवाणी

मजेदार तथ्य, मैंने हाल ही में SharePoint में ऐसा करने की कोशिश की। हालाँकि SharePoint में पहले से ही एक फ़ॉर्म है जो आपकी सभी सामग्री के चारों ओर लपेटता है, और किसी भी <form>टैग को अन्यथा उदार HTML पार्सर द्वारा फेंक दिया जाता है। इसलिए मुझे कीप्स या बस्ट को हाईजैक करना होगा। (BTW, Enter in SharePoint लॉन्च करना किसी कारण से एडिट मोड लॉन्च करता है। मुझे लगता है कि रिबन एक ही फॉर्म का उपयोग कर रहा है।)

A <button type="submit" onclick="return doSomething(this)">Value</button>काम करता है। returnकीवर्ड के भीतर सुराग निहित है

— गस

Answer 5

चूंकि addEventListenerअभी तक किसी ने उपयोग नहीं किया है, यहां मेरा संस्करण है। तत्वों को देखते हुए:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

मैं निम्नलिखित का उपयोग करेगा:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

यह आपको HTML को साफ रखते हुए ईवेंट प्रकार और क्रिया को अलग-अलग बदलने की अनुमति देता है।

ध्यान दें कि यह सुनिश्चित करने के लिए संभव है कि यह एक <form>कारण से बाहर है क्योंकि जब मैंने इन तत्वों को संलग्न किया था तो Enter दबाकर फॉर्म सबमिट किया और पृष्ठ को फिर से लोड किया। मुझे कुछ पलकें खोजने के लिए ले गया।

परिशिष्ट : @ruffin द्वारा एक टिप्पणी के लिए धन्यवाद, मैंने लापता इवेंट हैंडलर और ए जोड़ दिया हैpreventDefault इस कोड को (संभवतः) एक फॉर्म के अंदर भी काम करने की अनुमति दी है। (मैं इसे परीक्षण करने के लिए प्राप्त करूंगा, जिस बिंदु पर मैं ब्रैकेट की गई सामग्री को हटा दूंगा।)

Comments

मुझे वास्तव में समझ में नहीं आता है कि JQeuery के उत्तर में अधिक उत्थान क्यों हैं। मैं वेबडेवलपमेंट समुदाय के लिए रोता हूं।

— डेविड

आप सभी वास्तव में याद आ रहे हैं आपके कीपर हैंडलर में एक तर्क है और e.preventDefault()इसे रूपों के साथ काम करने के लिए। मेरा (नया) उत्तर देखें ।

— रफिन

जब तक आप अपने उपयोगकर्ताओं को वास्तव में किसी भी डेटा को दर्ज करने का इरादा नहीं करते हैं, तब तक आपको वास्तव में कुछ करना चाहिए जैसेif (event.keyCode == 13) { event.preventDefault(); go.click();}

— unsynchronized

इस छोटी सी चीज के लिए सिर्फ jQuery का उपयोग करना निश्चित है। यह CSP के साथ बहुत आसानी से काम करता है और लोड करने में कम समय लेता है। यदि आप कर सकते हैं, तो इस का उपयोग करें।

— अवामंदर

Answer 6

सादे जावास्क्रिप्ट में,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

मैंने देखा कि उत्तर केवल jQuery में दिया गया है, इसलिए मैंने सादे जावास्क्रिप्ट में भी कुछ देने की सोची।

Comments

document.layers? क्या आप अभी भी नेटस्केप का समर्थन कर रहे हैं? !!

— विक्टर

नहीं, आपको नेटस्केप का समर्थन करने की आवश्यकता नहीं है। blog.netscape.com/2007/12/28/…

— kingdango

netscape.com अब मौजूद नहीं है (यह aol.com पर पुनर्निर्देशित करता है) और फिर भी अभी भी nescape, अद्भुत लोगों का समर्थन कर रहे हैं।

— लेर्ट्स

evt.which ? evt.which : evt.keyCodeबराबर हैevt.which || evt.keyCode

— उपयोगकर्ता

@LeartS मैं शर्त लगा सकता हूं क्योंकि अभी भी नेटस्केप का उपयोग करने वाले लोग हैं ।

— शांतिबेलर्स

Answer 7

एक मूल चाल आप इस के लिए उपयोग कर सकते हैं कि मैंने पूरी तरह से उल्लेख नहीं देखा है। यदि आप अजाक्स कार्रवाई करना चाहते हैं, या Enter पर कुछ अन्य काम करते हैं, लेकिन वास्तव में ऐसा फ़ॉर्म सबमिट नहीं करना चाहते हैं जो आप कर सकते हैं:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

एक्शन सेट करना = "जावास्क्रिप्ट: शून्य (0);" इस तरह से डिफ़ॉल्ट व्यवहार को अनिवार्य रूप से रोकने के लिए यह एक शॉर्टकट है। इस स्थिति में एक विधि कहलाती है कि क्या आप एंट्री मारते हैं या बटन पर क्लिक करते हैं और कुछ डेटा लोड करने के लिए एक अजाक्स कॉल किया जाता है।

Comments

मोबाइल डिवाइस सपोर्ट के लिए यह एक बेहतर उपाय है। यह स्वचालित रूप से Android उपकरणों पर कुंजीपटल खाल, और यह भी आईओएस यदि आप जोड़ने searchCriteria.blur();के लिए onsubmit।

— हारून गिल

यह काम नहीं करेगा, क्योंकि पेज में एक और सबमिट बटन है।

— जोस गोमेज़

@ जोसगोमेज़, एक पृष्ठ में देव इच्छाओं के रूप में कई सबमिट बटन हो सकते हैं, केवल उनके संबंधित क्षेत्रों द्वारा ट्रिगर किया जा रहा है। यह प्रत्येक समूह के खेतों के लिए अलग-अलग फॉर्म रखता है। एक पृष्ठ एक रूप तक सीमित नहीं है।

— फ्रैडरिक

@ फ़्रेडरिक: प्रश्न से मैं (गलत?) समझ गया कि अन्य सबमिट बटन उसी रूप में था: "मेरे वर्तमान पृष्ठ पर पहले से ही एक अलग सबमिट बटन है, इसलिए मैं बटन को केवल सबमिट बटन नहीं बना सकता।"

— जोस गोमेज़

यह एक शानदार जवाब है क्योंकि यह कस्टम क्रियाओं की अनुमति देता है फिर भी फैंसी ओवरराइड कोड के एक गुच्छा की आवश्यकता से बचा जाता है।

— बिज़ोर

Answer 8

कोशिश करो:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

Answer 9

हर बार जब खोज कुंजी दबाया जाता है, तो उसे ट्रिगर करने के लिए, इसका उपयोग करें:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

Answer 10

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

यह सिर्फ कुछ है जो मेरे पास कुछ हालिया परियोजना से है ... मैंने इसे नेट पर पाया, और मुझे कोई विचार नहीं है कि क्या बेहतर तरीका है या सादे पुराने जावास्क्रिप्ट में नहीं है।

Answer 11

आधुनिक जेएस के साथ प्रयोग करें keypressऔर event.key === "Enter"!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

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

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

Answer 12

हालाँकि, मुझे पूरा यकीन है कि जब तक फॉर्म में केवल एक फ़ील्ड है और एक सबमिट बटन है, तब तक हिटिंग फॉर्म सबमिट करना चाहिए, भले ही पृष्ठ पर कोई अन्य फ़ॉर्म हो।

फिर आप जेएस के साथ फॉर्म ऑनसुबमिट पर कब्जा कर सकते हैं और जो भी सत्यापन या कॉलबैक चाहते हैं उसे कर सकते हैं।

Answer 13

HTML एटिब्यूट "एक्सेसकी" पर किसी का ध्यान नहीं गया जो थोड़ी देर से उपलब्ध है।

यह कीबोर्ड शॉर्टकट सामानों के लिए कोई जावास्क्रिप्ट तरीका नहीं है।

अभिगम MDN पर शॉर्टकट का गुण देता है

इस तरह इस्तेमाल किए जाने का इरादा। HTML विशेषता ही पर्याप्त है, हम ब्राउज़र और ओएस के आधार पर प्लेसहोल्डर या अन्य संकेतक को कैसे बदल सकते हैं। स्क्रिप्ट एक विचार देने के लिए एक अप्रकाशित खरोंच दृष्टिकोण है। आप छोटे बाउलर की तरह एक ब्राउज़र लाइब्रेरी डिटेक्टर का उपयोग करना चाह सकते हैं

let client = navigator.userAgent.toLowerCase(),
    isLinux = client.indexOf("linux") > -1,
    isWin = client.indexOf("windows") > -1,
    isMac = client.indexOf("apple") > -1,
    isFirefox = client.indexOf("firefox") > -1,
    isWebkit = client.indexOf("webkit") > -1,
    isOpera = client.indexOf("opera") > -1,
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Comments

पहुँच दो है s।

— कैसर

ओपी के प्रश्न का उत्तर कुंजी के विशेष मामले के आसपास नहीं लगता है = ENTER

— ओज़ान बेलिक

Answer 14

यह वहाँ बाहर सभी YUI प्रेमियों के लिए एक समाधान है :

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

इस विशेष मामले में मेरे पास बेहतर परिणाम थे YUI का उपयोग करते हुए DOM ऑब्जेक्ट को ट्रिगर करने के लिए जो बटन कार्यक्षमता के साथ इंजेक्ट किया गया है - लेकिन यह एक और है ...

Answer 15

में Angular2 :

(keyup.enter)="doSomething()"

यदि आप बटन में कुछ दृश्य प्रतिक्रिया नहीं चाहते हैं, तो यह बटन को संदर्भित नहीं करने के लिए एक अच्छा डिज़ाइन है, बल्कि सीधे नियंत्रक को आमंत्रित करता है।

इसके अलावा, आईडी की जरूरत नहीं है - दृश्य और मॉडल के बीच अलग करने का एक और NG2 तरीका।

Comments

यहाँ पर कीप विकल्पों पर अधिक जानकारी के बारे में एक प्रश्न है: stackoverflow.com/q/32155887/435605

— AlikElzin-kilaka

Answer 16

इस स्थिति में आप पोस्टिंग से सर्वर में प्रवेश बटन को भी व्यवहार्य बनाना चाहते हैं और Js स्क्रिप्ट को निष्पादित करते हैं।

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 17

यह ऑनचेंज प्रयास करीब है, लेकिन ब्राउज़र के सम्मान के साथ दुर्व्यवहार करता है फिर फॉरवर्ड (सफारी 4.0.5 और फ़ायरफ़ॉक्स 3.6.3 पर), इसलिए अंततः, मैं इसकी सिफारिश नहीं करूंगा।

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Comments

यह भी उल्लेख करना चाहिए कि यह अनफोकस पर ट्रिगर होता है।

— फ्लोरेसेंटग्रीन 5

Answer 18

event.returnValue = false

ईवेंट को हैंडल करते समय या अपने ईवेंट हैंडलर कॉल पर फ़ंक्शन का उपयोग करें।

यह कम से कम इंटरनेट एक्सप्लोरर और ओपेरा में काम करता है।

Answer 19

Jquery मोबाइल के लिए मुझे करना था

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

Comments

.livejQuery 1.7 में पदावनत किया गया है। यह अभी भी jQuery मोबाइल में ठीक माना जाता है?

— बरमार

Answer 20

पूरी तरह से सादे जावास्क्रिप्ट समाधान जोड़ने के लिए , जो फॉर्म सबमिट करने के साथ @ icedwater के मुद्दे को संबोधित करता है , यहां एक संपूर्ण समाधान हैform ।

नोट: यह IE9 + सहित "आधुनिक ब्राउज़र" के लिए है। IE8 संस्करण बहुत अधिक जटिल नहीं है, और यहां सीखा जा सकता है ।

---

बेला: https://jsfiddle.net/rufwork/gm6h25th/1/

एचटीएमएल

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

जावास्क्रिप्ट

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

Comments

स्पष्टीकरण के बिना डाउनवोट्स आपकी चिंताओं को संबोधित करना मुश्किल बनाते हैं। मुझे पता है कि क्या सही नहीं लगता है, और मुझे फॉलो-अप करने में खुशी होगी।

— रफिन

Answer 21

आधुनिक, बिना पढ़े (बिना keyCodeया onkeydownजावास्क्रिप्ट)

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Comments

यह मेरी राय में सबसे आसान जवाब है जो काम करता है। मेरे उपयोग के मामले में, मैंने इसे onkeypress = "inputKeyPressed (इवेंट)" में अपग्रेड किया और फिर फ़ंक्शन में ही event.which पैरामीटर को संभाला। प्रमुख उदाहरण रिटर्न के लिए 13. के रूप में event.which दर्ज

— ak93

Answer 22

document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

मेरे दो सेंट का उपयोग करता है। मैं विंडोज 8 के लिए एक ऐप पर काम कर रहा हूं और चाहता हूं कि जब मैं Enter बटन दबाता हूं तो बटन एक क्लिक इवेंट को पंजीकृत करने के लिए। जेएस में यह कर रहा हूं। मैंने कुछ सुझावों की कोशिश की, लेकिन उनके पास मुद्दे थे। यह ठीक काम करता है।

Comments

दस्तावेज़ पर ईवेंट हैंडलर लगाने के लिए ओवरकिल की तरह। यदि आपके पास charCodeकहीं और 13 था , तो आप बंद कर रहे हैं printResult()।

— रफिन

Answer 23

JQuery के साथ करने के लिए:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

सामान्य जावास्क्रिप्ट के साथ करने के लिए:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

Answer 24

उन लोगों के लिए जो संक्षिप्तता और आधुनिक जेएस दृष्टिकोण पसंद कर सकते हैं।

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

जहां इनपुट एक चर है जिसमें आपके इनपुट तत्व होते हैं।

Answer 25

JQuery में, आप उपयोग कर सकते हैं event.which==13। यदि आपके पास एक है form, तो आप उपयोग कर सकते हैं $('#formid').submit()(सही घटना श्रोताओं के साथ उक्त फॉर्म जमा करने के लिए जोड़ा गया है)।

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

Answer 26

मैंने केवल कक्षा जोड़कर इस सुविधा को प्राप्त करने के लिए कस्टम जावास्क्रिप्ट विकसित किया है

उदाहरण: <button type="button" class="ctrl-p">Custom Print</button>

यहाँ इसकी जाँच करें Fiddle
- या -
रनिंग उदाहरण देखें https://stackoverflow.com/a/58010042/6631280

नोट: वर्तमान तर्क पर, आपको Ctrl+ दबाएँEnter

Answer 27

आधुनिक JS के keyUpलिए पदावनत किया जाता है, keyइसके बजाय उपयोग करें

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

Answer 28

यह भी मदद कर सकता है, एक छोटा जावास्क्रिप्ट फ़ंक्शन, जो ठीक काम करता है:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

मुझे पता है कि यह सवाल हल हो गया है, लेकिन मुझे सिर्फ कुछ मिला है, जो दूसरों के लिए मददगार हो सकता है।

Comments

प्रश्न एक टेक्स्ट बॉक्स में एंटर कुंजी के साथ एक बटन क्लिक को ट्रिगर करने के लिए था। आपका समाधान "वॉटरमार्क" प्रकार की कार्यक्षमता के लिए है।

— kdenney