330

मेरे पास formदो टेक्स्ट बॉक्स हैं, एक चुनिंदा ड्रॉप डाउन और एक रेडियो बटन । जब enterकुंजी दबाया जाता है, तो मैं एक जावास्क्रिप्ट फ़ंक्शन (उपयोगकर्ता परिभाषित) को कॉल करना चाहता हूं, लेकिन जब मैं इसे दबाता हूं, तो फॉर्म सबमिट किया जाता है।

formजब enterकुंजी दबाया जाता है, तो मुझे सबमिट करने से कैसे रोकें ?

— Shyju
स्रोत

445

if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

ठीक है, तो कल्पना कीजिए कि आपके पास एक फॉर्म में निम्नलिखित टेक्स्टबॉक्स है:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

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

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

फ़ंक्शन के मान को वापस करने से ईवेंट हैंडलर को ईवेंट को आगे नहीं बढ़ाने के लिए सचेत किया जाएगा, और कीपर ईवेंट को आगे नियंत्रित होने से रोका जा सकेगा।

ध्यान दें:

यह उठाई बाहर हो गया है कि keyCodeहै अब पदावनत । अगले सबसे अच्छे विकल्प whichको भी हटा दिया गया है ।

दुर्भाग्य से इष्ट मानक key, जिसे व्यापक रूप से आधुनिक ब्राउज़रों द्वारा समर्थित किया गया है, IE और एज में कुछ नीरस व्यवहार है । IE11 से पुराने कुछ भी अभी भी एक पॉलीफ़िल की आवश्यकता होगी ।

इसके अलावा, जबकि पदावनत चेतावनी के बारे में काफी अशुभ है keyCodeऔर which, उन को हटाने से बड़ी संख्या में कानूनी वेबसाइटों की अनकही परिवर्तन को दर्शाया जाएगा। इस कारण से, यह संभावना नहीं है कि वे जल्द ही कहीं भी जा रहे हैं।

— जोश
स्रोत

4

उपयोगकर्ता द्वारा परिभाषित वास्तव में आपका क्या मतलब है? जैसे, उपयोगकर्ता टेक्स्ट बॉक्स में कुछ स्क्रिप्ट टाइप करता है और आप इसे Eval () का उपयोग करके चलाते हैं ???

— जोश

1

क्या यह ऐसी स्थिति है जहां PreventDefualt का उपयोग किया जा सकता है?

12

@ Stuart.Sklinar - ब्राउज़र में टाइप किए गए इनपुट पर एक इवैल्यूशन करने से उन्हें क्रोम / एफएफ / IE में कमांड कंसोल को खोलने और स्क्रिप्ट में खुद टाइप करने की तुलना में कोई अधिक नियंत्रण नहीं मिलता है। एकमात्र व्यक्ति जिसे वे चोट पहुंचा सकते हैं, वह स्वयं है ... जब तक कि आप सर्वर पर सुरक्षा को लागू नहीं कर रहे हैं। यह एक और मुद्दा है।

— जोश

1

@SteelBrain - फिर से, किसी को एक टेक्स्टबॉक्स जिसमें वे टाइप कर सकते हैं और फिर evalएक बटन दबाकर सामग्री दे सकते हैं, अगर वे डेवलपर टूल को खोलते हैं और किया तो यह अलग नहीं है। अगर यह कुछ ऐसा था जो DB में सहेजा जा रहा था और ANOTHER उपयोगकर्ता द्वारा खोला जा सकता है , तो यह एक बड़ी बात होगी, लेकिन यह एक समस्या है जो इस छोटे से स्निपेट से पूरी तरह से स्वतंत्र है।

— जोश

5

keyCodeअब पदावनत कर दिया जाता है

— जॉन सैगर्स

137

दोनों का उपयोग करें event.whichऔर event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

— Agiagnoc
स्रोत

11

क्यों दोनों Event.which और event.keyCode?

— एलेक्स स्पर्लिंग

35

कुछ ब्राउज़र whichदूसरों का समर्थन करते हैं keyCode। दोनों को शामिल करना अच्छा अभ्यास है।

— user568109

इसके अलावा keydownघटना का उपयोग करें keyupयाkeypress

— मनीष_स

@Agiagnoc लेकिन यह किस घटना से जुड़ा होना चाहिए?

— डॉन चेडल

2

@ मनीष, की-बोर्ड आपको की-डाउन / अप की तुलना में खेलने की अधिक जानकारी देता है। stackoverflow.com/a/9905293/322537

— हरमन इंगलड्ससन

78

यदि आप jQuery का उपयोग कर रहे हैं:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});

— चरवाहे
स्रोत

1

मुझे यह काम नहीं मिला। हैंडलर फायर preventDefaultकरता है , लेकिन कम से कम क्रोम में, फ़ॉर्म सबमिट करना बंद नहीं करता है।

— ड्रू नोकें

19

आपको की-अप के बजाय कीडाउन इवेंट का उपयोग करना होगा:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });

— पेटार

2

कीप को सबमिशन के बाद निकाल दिया जाता है, और इसलिए इसे रद्द नहीं किया जा सकता है।

— पियरे-ओलिवियर वर्सेस

मेरे लिए कीप और कीप दोनों ने काम किया। मैं कीपर के साथ गया। धन्यवाद!

— मार्कियंम

'keydown'सही है क्योंकि अन्य टिप्पणीकार बता रहे हैं। चूंकि इसे नहीं बदला गया है इसलिए मैं उत्तर को अपडेट करूंगा। मैंने इस उत्तर का उपयोग किया और थोड़ी देर के लिए अटक गया जब तक कि मैं वापस नहीं आया और टिप्पणियों को देखा।

— मैट के

71

event.key === "दर्ज करें"

हाल ही में और अधिक क्लीनर: का उपयोग करें event.key। कोई और अधिक मनमानी संख्या कोड!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

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

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

— Gibolt
स्रोत

इसी की तलाश में था। $ घटना के कंसोल लॉग में प्रमुख संपत्ति देखी। सोचा कि यह अधिक विश्वसनीय हो सकता है

— tatsu

यह सिर्फ एक मैक्रो या उपनाम नहीं है? क्या इस कोड का उपयोग करके प्रदर्शन के संदर्भ में कोई लाभ है?

— क्लॉकव्रक

1

keyCodeपदावनत किया गया है। यह आपके कोड में एक जादू पूर्णांक की तुलना में अधिक पठनीय और

— प्राप्य है

24

संपूर्ण दस्तावेज़ पर दर्ज की गई कुंजी का पता लगाएँ:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

— उमर
स्रोत

17

onsubmitफ़ॉर्म की कार्रवाई को अपने फ़ंक्शन के लिए कॉल ओवरराइड करें और इसके बाद गलत जोड़ें, अर्थात:

<form onsubmit="javascript:myfunc();return false;" >

— rpkelly
स्रोत

मैं इस पृष्ठ पर एक और फ़ॉर्म सबमिट करने के साथ ऑनसुमिट को ओवरराइड नहीं कर सकता

— Shyju

5

हाँ तुम कर सकते हो। जावास्क्रिप्ट प्रोटोटाइप आधारित भाषा है। document.forms ["form_name"]। ऑनसुमिट = fucntion () {}

— the_drow

फॉर्म जमा होने पर मेरे पास हटाने की एक और प्रक्रिया है। क्या मैं इसे बनाए रखना चाहता हूं

— Shyju

17

एक प्रतिक्रिया जे एस समाधान

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

— caffeinescript
स्रोत

9

तो शायद सबसे अच्छा समाधान संभव के रूप में कई ब्राउज़रों को कवर करने के लिए और भविष्य के सबूत होंगे

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

— मैट डोरन
स्रोत

6

यदि आप इसे पूरी तरह से जावा स्क्रिप्ट का उपयोग करके करना चाहते हैं तो एक उदाहरण है जो पूरी तरह से काम करता है

मान लीजिए कि यह आपकी html फाइल है

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

अपने popup.js फ़ाइल में बस इस फ़ंक्शन का उपयोग करें

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});

— दिना टाकीट
स्रोत

5

नीचे कोड ENTERपूरे पृष्ठ पर कुंजी के लिए श्रोता को जोड़ देगा ।

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

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

सभी ब्राउज़रों पर परीक्षण किया गया।

— हितेश साहू
स्रोत

3

एक jQuery समाधान।

मैं पाठ इनपुट पर धब्बा घटना के बाद निकाल दिए जाने तक फॉर्म जमा करने में देरी करने के लिए एक रास्ता तलाश रहा था।

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

अधिक सामान्य संस्करण प्राप्त करना अच्छा होगा जो केवल फॉर्म सबमिट करने के बजाय सभी विलंबित घटनाओं को निकाल देता है।

— चिम
स्रोत

3

मेरे दृष्टिकोण से एक बहुत सरल और प्रभावी तरीका होना चाहिए:

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

— Thanos
स्रोत

2

टाइपस्क्रिप्ट का उपयोग करना, और फ़ंक्शन पर मल्टील्स कॉल से बचें

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}

— वैगनर परेरा
स्रोत

यह सवाल आठ साल से अधिक पुराना है। टाइपस्क्रिप्ट तब मौजूद नहीं था। तो क्या आप सुनिश्चित हैं कि आप किसी अन्य प्रश्न का उत्तर नहीं दे रहे हैं?

— निको हसे

2

थोड़ा सा सरल

की-बोर्ड "एन्टर" पर फॉर्म न भेजें:

<form id="form_cdb" onsubmit="return false">

"Enter" पर फ़ंक्शन को निष्पादित करें:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

— rbz
स्रोत

1

देशी जेएस (लाने एपी)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();

<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">

स्निपेट का विस्तार करें

— xgqfrms
स्रोत

क्‍यों क्‍लाइंट_आईडी आदि को यहां शामिल किया गया है? क्या कोड वैध है?

— eddyparkinson

1

<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

इस कोड को अपने HTML पेज में जोड़ें ... यह अक्षम हो जाएगा ... बटन दर्ज करें ..

— अखिलेश सिंह
स्रोत

0

<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>

— मिजानुर रहमान
स्रोत

0

क्रॉस ब्राउज़र समाधान

कुछ पुराने ब्राउज़रों ने गैर-मानक तरीके से कीडाउन घटनाओं को लागू किया।

KeyBoardEvent.key आधुनिक ब्राउज़रों में लागू होने वाला तरीका है।

which और keyCodeआजकल अपदस्थ हैं, लेकिन फिर भी इन घटनाओं की जांच करने के लिए यह चोट नहीं करता है ताकि कोड उन उपयोगकर्ताओं के लिए काम करे जो अभी भी IE जैसे पुराने ब्राउज़रों का उपयोग करते हैं।

isKeyPressedसमारोह जांच करता है कि दबाया कुंजी दर्ज किया गया था और event.preventDefault()hinders प्रस्तुत करने से प्रपत्र।

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

न्यूनतम काम करने का उदाहरण

जे एस

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

एचटीएमएल

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

— तोबी ओबेक
स्रोत

जावास्क्रिप्ट में मुख्य प्रेस घटना दर्ज करें

ध्यान दें:

event.key === "दर्ज करें"

थोड़ा सा सरल

देशी जेएस (लाने एपी)

क्रॉस ब्राउज़र समाधान

न्यूनतम काम करने का उदाहरण