जब आप टेक्स्ट बॉक्स में Enter दबाते हैं तो HTML बटन को कैसे ट्रिगर किया जाता है?


106

इसलिए मेरे पास अब तक का कोड है:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

यह एक में नहीं है <form>और जैसा कि यह एक के भीतर है <div>। हालाँकि जब मैं कुछ textbox"addLinks" में टाइप करता हूं, तो मैं चाहता हूं कि उपयोगकर्ता एंटर को दबाए और "लिंकडेड" को ट्रिगर करने में सक्षम हो, buttonजो तब जावास्क्रिप्ट फ़ंक्शन चलाएगा।
मैं यह कैसे कर सकता हूँ?
धन्यवाद

संपादित करें: मुझे यह कोड मिला, लेकिन यह काम नहीं कर रहा है।

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

3
(दर्ज करें बटन) के keypressलिए बाइंड और चेक e.charCode==13करें।
ब्रैड क्रिस्टी

क्या आपने उपरोक्त कोड का उपयोग करने से पहले jquery लाइब्रेरी संदर्भ जोड़ा है?
मिलिंद अनंतवार

हां, मेरे पास पुस्तकालय का संदर्भ था, यह सुनिश्चित नहीं था कि यह काम क्यों नहीं कर रहा था, लेकिन अब यह ठीक है। धन्यवाद
बेन

हां, जैसा कि @BradChristie ने उल्लेख किया है, keypressया इस उत्तरkeydown में उल्लेख किया है, जाने का रास्ता है।
१४:३ak में मेटाकर्मिट

जवाबों:


117
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

5
क्लिक ईवेंट के बाद adding रिटर्न मिथ्या ’जोड़ने से भी मदद
मिलती है

dmitry_romanov का उत्तर बेहतर है क्योंकि यह शुद्ध html है।
मैकके

6
@MKKay, नहीं यह नहीं है। बटन का उपयोग रूपों के अलावा चीजों के लिए भी किया जा सकता है। वास्तव में, ओपी का प्रश्न स्पष्ट रूप से एक रूप में नहीं है।
दान

2
@ डाइब्स काफी सही है, मुझे यकीन नहीं है कि मैंने उस दिन क्या किया था लेकिन मुझे ब्रेन फार्ट हुआ होगा।
मास्टर्स ऐलन में


76

यह …… 2020 है। और मेरा मानना ​​है कि यह अभी भी सही है।


प्रयोग नहीं करें keypress

  1. keypressघटना है ट्रिगर नहीं है जब उपयोगकर्ता प्रेस एक चाबी है कि किसी भी चरित्र का उत्पादन नहीं करता है, जैसे Tab, Caps Lock, Delete, Backspace, Escape, बाएं और दाएं Shift, समारोह चाबियाँ ( F1- F12)।

    keypressघटना मोज़िला डेवलपर नेटवर्क

    keypressजब एक महत्वपूर्ण घटना के सक्रिय होने पर नीचे दबाया जाता है , और है कि कुंजी सामान्य रूप से एक चरित्र मूल्य पैदा करता हैinputइसके बजाय उपयोग करें ।

  2. इसे हटा दिया गया है।

    keypressइवेंट UI इवेंट्स (W3C वर्किंग ड्राफ्ट 8 नवंबर, 2018 को प्रकाशित हुआ।)

    • नोट | यह keypressआयोजन पारंपरिक रूप से एक भौतिक कुंजी के बजाय एक चरित्र मूल्य का पता लगाने के साथ जुड़ा हुआ है , और कुछ कॉन्फ़िगरेशन में सभी कुंजी पर उपलब्ध नहीं हो सकता है।
    • चेतावनी | keypressघटना प्रकार संदर्भ और पूर्णता के लिए इस विनिर्देश में परिभाषित किया गया है, लेकिन इस विनिर्देश deprecates इस घटना प्रकार का उपयोग। जब संदर्भों के संपादन में, लेखक beforeinputइसके बजाय घटना की सदस्यता ले सकते हैं ।

प्रयोग नहीं करें KeyboardEvent.keyCode

  1. इसे हटा दिया गया है।

    KeyboardEvent.keyCode मोज़िला डेवलपर नेटवर्क

    पदावनत | यह सुविधा अब अनुशंसित नहीं है। हालांकि कुछ ब्राउज़र अभी भी इसका समर्थन कर सकते हैं, यह पहले से ही संबंधित वेब मानकों से हटा दिया गया है, गिराए जाने की प्रक्रिया में हो सकता है, या केवल संगतता उद्देश्यों के लिए रखा जा सकता है। इसका उपयोग करने से बचें, और यदि संभव हो तो मौजूदा कोड अपडेट करें; अपने निर्णय का मार्गदर्शन करने के लिए इस पृष्ठ के नीचे संगतता तालिका देखें । विदित हो कि यह सुविधा किसी भी समय काम करना बंद कर सकती है।


फिर मुझे क्या उपयोग करना चाहिए? (अच्छा अभ्यास)

// Make sure this code gets executed after the DOM is loaded.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

कैसे के बारे में: if (event.key == "Enter") { document.querySelector("#linkadd").click(); } ?
अनुपम

2
ध्यान दें कि .keyसभी ब्राउज़रों में समर्थित नहीं है: caniuse.com/#feat=keyboardevent-key - लगभग 10% लोग उन ब्राउज़र का उपयोग करते हैं जो इसका समर्थन नहीं करते हैं।
मार्टिन Tournoij

72

एक js-free समाधान हैं।

type=submitउस बटन पर सेट करें जिसे आप डिफ़ॉल्ट और type=buttonअन्य बटनों में रखना चाहते हैं। अब नीचे दिए गए फॉर्म में आप किसी भी इनपुट फ़ील्ड में एंटर Renderदबा सकते हैं , और बटन काम करेगा (इस तथ्य के बावजूद कि यह फॉर्म में दूसरा बटन है)।

उदाहरण:

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

FF24 और Chrome 35 में परीक्षण किया गया (html formaction5 फीचर है, लेकिन typeऐसा नहीं है)।


17
केवल तभी काम करता है जब आप एक फॉर्म में हों, ओपी एक फॉर्म का उपयोग नहीं कर रहा है
एंड्रयू

@ और हां, मुझे याद आया। अब मैं इसे स्पष्ट रूप से देख सकता हूं, धन्यवाद।
dmitry_romanov

4
@ और, सच है, लेकिन यह ज्यादातर मामलों में इसे कुछ भी नहीं के रूप में लपेटने के लिए तुच्छ है ...
स्टीफन चुंग

2
इसके अतिरिक्त यह समाधान iOS वर्चुअल कीबोर्ड [गो] बटन पर काम करता है जिसकी डिफ़ॉल्ट कार्रवाई सबमिट करना है।
एलिमेंटल

10
  1. buttonएक के साथ बदलेंsubmit
  2. प्रगतिशील रहें , सुनिश्चित करें कि आपके पास सर्वर साइड संस्करण है
  3. अपने जावास्क्रिप्ट को submitफॉर्म के clickहैंडलर से बांधें, बटन के हैंडलर से नहीं

फ़ील्ड में एंटर दबाने पर फॉर्म सबमिट हो जाएगा, और सबमिट हैंडलर में आग लग जाएगी।


6

आप अपने इनपुट में एक इवेंट हैंडलर जोड़ सकते हैं:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

2

यह तब काम करता है जब इनपुट प्रकार = "बटन" को इनपुट प्रकार के साथ बदल दिया जाता है = डिफ़ॉल्ट बटन के लिए "सबमिट" जिसे ट्रिगर करने की आवश्यकता होती है।


1

सबसे पहले jquery लाइब्रेरी फ़ाइल jquery को जोड़ें और इसे अपने html हेड में कॉल करें।

और फिर jquery आधारित कोड का उपयोग करें ...

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

1

यह करना चाहिए, मैं jQuery का उपयोग कर रहा हूँ आप सादे जावास्क्रिप्ट लिख सकते हैं। अपनी कार्यक्षमता के साथ
बदलें sendMessage()

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});

1

पिछले कुछ उत्तरों के आधार पर, मैं इसे लेकर आया:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

फिडल पर एक नजर

संपादित करें: यदि आप अतिरिक्त html तत्वों को जोड़ना नहीं चाहते हैं, तो आप इसे केवल JS के साथ कर सकते हैं:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     

0

मैंने पाया w3schools.com howto, उनकी कोशिश मेरा पृष्ठ निम्नलिखित में है।

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

यह मेरे नियमित ब्राउज़र में काम करता है लेकिन मेरे php ऐप में काम नहीं करता है जो बिल्ट इन php ब्राउज़र का उपयोग करता है।

थोड़ा मर जाने के बाद मैं निम्नलिखित शुद्ध जावास्क्रिप्ट विकल्प के साथ आया जो मेरी स्थिति के लिए काम करता है और हर दूसरी स्थिति में काम करना चाहिए:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML बटन को सक्रिय करने के लिए टेक्स्टबॉक्स के अंदर एंटर की दबाएं।

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>


-2

मैं एक केन्डो बटन का उपयोग कर रहा हूं। इसने मेरे लिए काम किया।

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.