Enter दबाकर फ़ॉर्म सबमिट करने से उपयोगकर्ताओं को रोकें

772

मेरे पास एक वेबसाइट पर एक सर्वेक्षण है, और उपयोगकर्ताओं द्वारा दर्ज किए जाने के साथ कुछ समस्याएं प्रतीत होती हैं (मुझे नहीं पता क्यों) और गलती से सबमिट बटन पर क्लिक किए बिना सर्वेक्षण (फ़ॉर्म) सबमिट करना होगा। क्या इसको रोकने के लिए कोई रास्ता है?

मैं सर्वेक्षण में HTML, PHP 5.2.9 और jQuery का उपयोग कर रहा हूं।

jquery  html  forms  form-submit 
— DForck42
स्रोत
2
प्रपत्र टैग का उपयोग न करें और कस्टम ajax अनुरोध करें :) लेकिन यकीन है, आप कुंजी-सुनने और रोकथाम के दृष्टिकोण के साथ आगे बढ़ सकते हैं, यही मैं करूँगा ..
— jancha
मैं सिर्फ फॉर्म टैग का उपयोग नहीं करता हूं क्योंकि मैं गैर-पारंपरिक तरीकों से अजाक्स अनुरोधों के माध्यम से प्रपत्रों को संसाधित करना पसंद करता हूं (यानी: कुछ क्षेत्रों को सबमिट करना क्योंकि उनका फोकस गिरा दिया जाता है, आदि)। आप Enter कुंजी को पकड़ने के लिए एक विशेष श्रोता भी बना सकते हैं और इसे तभी संसाधित कर सकते हैं जब आप इसे करना चाहते हैं।
— जुआन

जवाबों:

881

आप इस तरह के रूप में एक विधि का उपयोग कर सकते हैं

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

मूल पोस्ट पर टिप्पणियों को पढ़ने के लिए, इसे और अधिक प्रयोग करने योग्य बनाने के लिए और Enterसभी क्षेत्रों को पूरा करने पर लोगों को दबाने की अनुमति दें :

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});
— पीटर मोर्टेंसन
स्रोत
7
मैं वर्तमान में बस एक त्वरित सुधार की तलाश में हूं, और सत्यापन आइटम को लागू करने के लिए समय नहीं है। मैं हर किसी के जवाब की सराहना करता हूं, लेकिन यह वही है जो मैं इस समय के साथ जा रहा हूं। धन्यवाद।
— DForck42
8
यह विधि अनिश्चित है क्योंकि यह सबमिट बटन पर ध्यान केंद्रित करते हुए उपयोगकर्ता को फ़ॉर्म सबमिट करने से रोकता है। सबसे अच्छा समाधान नीचे BalusC का होगा, जहां प्रवेश केवल रुकावट के रूप में होता है, जबकि फॉर्म इनपुट पर ध्यान केंद्रित किया जाता है।
— अनसन काओ
3
मैंने देखा है स्थितियों (केवल Internet Explorer) जहां बाँध के लिए की जरूरत keydownपर documentके बजाय windowइस के लिए काम करने के लिए।
— मार्टिन
8
आप && !$(document.activeElement).is('textarea')हालत में जोड़ना चाह सकते हैं , या एक textarea के अंदर newlines अवरुद्ध कर रहे हैं (IE में कम से कम)।
— फ्लैश
1
यह मेरे लिए काम करता है। लेकिन यह भी textarea में ब्रेक लाइन को जोड़ने से रोकता है।
— सेसर लियोन
613

कहीं भी प्रवेश को अस्वीकार करें

यदि आपके पास <textarea>अपना फॉर्म नहीं है, तो बस निम्नलिखित को अपने साथ जोड़ें <form>:

<form ... onkeydown="return event.key != 'Enter';">

या jQuery के साथ:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

यह कारण होगा कि फॉर्म के अंदर हर कुंजी प्रेस पर जाँच की जाएगी key। यदि यह नहीं है Enter, तो यह वापस आ जाएगा trueऔर हमेशा की तरह कुछ भी जारी रहेगा। यदि यह है Enter, तो यह वापस आ जाएगा falseऔर कुछ भी तुरंत बंद हो जाएगा, इसलिए फॉर्म जमा नहीं किया जाएगा।

keydownघटना से अधिक पसंद किया जाता है keyupके रूप में keyupब्लॉक फार्म के लिए बहुत देर हो चुकी जमा करें। ऐतिहासिक रूप से वहाँ भी था keypress, लेकिन यह है, जैसा कि है KeyboardEvent.keyCode। आपको KeyboardEvent.keyइसके बजाय उपयोग करना चाहिए जो कुंजी दबाए जाने का नाम देता है। कबEnter जाँच की जाती है, तो यह 13 (सामान्य प्रवेश) के साथ-साथ 108 (संख्या दर्ज) की जाँच करेगा।

ध्यान दें कि $(window)कुछ अन्य उत्तर में सुझाव के बजाय के रूप में $(document)नहीं काम करने के लिए करता है keydown/ keyupअगर आप साथ ही उन गरीब उपयोगकर्ताओं को कवर करने की तरह कर रहे हैं, आईई <= 8 में इतना है कि नहीं की एक अच्छा विकल्प।

केवल Textareas पर कुंजी दर्ज करने की अनुमति दें

यदि आपके पास <textarea>आपके फॉर्म में है (जो कि निश्चित रूप से एंटर कुंजी को स्वीकार करना चाहिए ), तो कीडाउन हैंडलर को प्रत्येक व्यक्तिगत इनपुट तत्व में जोड़ें <textarea>।

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

बॉयलरप्लेट को कम करने के लिए, यह jQuery के साथ किया जाना बेहतर है:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

यदि आपके पास उन इनपुट तत्वों पर अन्य ईवेंट हैंडलर फ़ंक्शन जुड़े हुए हैं, जिन्हें आप किसी कारण से दर्ज करना चाहते हैं, तो केवल झूठे लौटने के बजाय ईवेंट के डिफ़ॉल्ट व्यवहार को रोकें, इसलिए यह अन्य हैंडलर को ठीक से प्रचारित कर सकता है।

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Textareas पर कुंजी दर्ज करने दें और केवल बटन सबमिट करें

यदि आप सबमिट बटन पर <input|button type="submit">भी दर्ज करना चाहते हैं, तो आप नीचे दिए गए चयनकर्ता को हमेशा परिष्कृत कर सकते हैं।

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

ध्यान दें कि input[type=text]जैसा कि कुछ अन्य उत्तरों में सुझाया गया है, उन HTML5 गैर-पाठ इनपुटों को कवर नहीं करता है, इसलिए यह एक अच्छा चयनकर्ता नहीं है।

— BalusC
स्रोत
11
यह एक अच्छा जवाब होना चाहिए क्योंकि यह भी textarea और बेहतर समझा घटना के प्रसार सहित फार्म के साथ संबंधित है
— foobar
6
":input:not(textarea):not([type=submit]):not(button)"अगर आप <button>इसके बजाय का उपयोग कर रहे हैं<input type=submit>
— शमौन_ वीवर
यह टैक्स्टेरिया के अलावा किसी भी इनपुट पर काम करने से एंटर कुंजी को रोकता है। यह एक अच्छा समाधान नहीं है
— mate.gwozdz 14
क्या इससे पहले कोई कोलन होना चाहिए था input?
— 22
1
@YodaDaCoda: सहमत और समायोजित।
— बालुसक
110

खंड 4.10.22.2 डब्ल्यू 3 सी एचटीएमएल 5 युक्ति का प्रस्तुतिकरण कहता है:

किसी formतत्व का डिफ़ॉल्ट बटन ट्री ऑर्डर में पहला सबमिट बटन है जिसका फॉर्म मालिक वह तत्व है।form

यदि उपयोगकर्ता एजेंट उपयोगकर्ता को अंतर्निहित रूप से फ़ॉर्म सबमिट करने देने का समर्थन करता है (उदाहरण के लिए, कुछ प्लेटफ़ॉर्म पर "एंटर" कुंजी मारते हुए, जबकि टेक्स्ट फ़ील्ड पर ध्यान केंद्रित किया जाता है तो यह प्रपत्र को प्रस्तुत करता है), तो ऐसा करने के लिए एक डिफ़ॉल्ट बटन की एक सक्रियता होती है। व्यवहार के कारण उपयोगकर्ता एजेंट को उस डिफ़ॉल्ट बटन पर सिंथेटिक क्लिक सक्रियण चरणों को चलाने का कारण होना चाहिए ।

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

इसलिए, फॉर्म के किसी भी निहित जमा को अक्षम करने के लिए एक मानक-अनुपालन तरीका एक अक्षम सबमिट बटन को फॉर्म में पहले सबमिट बटन के रूप में रखना है:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

इस दृष्टिकोण की एक अच्छी विशेषता यह है कि यह जावास्क्रिप्ट के बिना काम करता है ; जावास्क्रिप्ट सक्षम है या नहीं, अंतर्निहित फॉर्म सबमिशन को रोकने के लिए एक मानक-अनुरूप वेब ब्राउज़र की आवश्यकता होती है।

— डैनियल ट्रेबिएन
स्रोत
5
इर्रर्र ... यह ठोस सोना है। यदि यह वास्तव में क्रॉस ब्राउज़र काम करता है, तो यह शीर्ष पर जाने के योग्य है! इतने सारे लोगों ने keypress, keydown आदि की विविधताओं के साथ कैसे उत्तर दिया है, लेकिन इस मानक आधारित उत्तर से चूक गए?
— जॉन रीस
3
एक तरफ यह सरल है और स्वीकृत उत्तरों द्वारा सुझाए गए सभी नुकसानों को रोकता है। दूसरी ओर, यह मानक के एक मामूली शोषण की तरह लगता है। आरूढ़ के लिए कुदोस- * विशेषता। मुझे इस पर अधिक प्रतिक्रिया सुनना अच्छा लगेगा।
— सोलविटिग
2
के रूप में भी काम करता है <input type="submit" disabled style="display: none" aria-hidden="true" />और आप कुछ चार्ट द्वारा अपने पृष्ठ का आकार कम कर सकते हैं। :
— गैफन
7
IE 11 वैसे भी प्रस्तुत करता है।
— कामारोएसएस
2
सफारी नया IE है।
— ट्विस्टेडपिक्सल
68

फ़ॉर्म को सबमिट करने से रोकने के लिए मुझे कुंजी दबाने से संबंधित सभी तीन घटनाओं को पकड़ना था:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

आप उपरोक्त सभी को एक अच्छे कॉम्पैक्ट संस्करण में जोड़ सकते हैं:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
— Upgradingdave
स्रोत
7
आप या तो पिछले 3 चयनकर्ताओं को चेन कर सकते हैं या एक जैसी विधि के साथ कई घटनाओं को बांध सकते हैं $("#search").bind('keypress keyup keydown',preventSubmit);
— मोआक
क्योंकि ASP.NET वेब फॉर्म में सब कुछ एक <form>टैग में नेस्टेड होना चाहिए , एंटर कुंजी फॉर्म सबमिट करेगा ... इस सॉल्यूशन ने एंटर की को निष्क्रिय कर दिया और समस्या को ठीक कर दिया, धन्यवाद @Dave! फिर मैंने कुछ क्षेत्रों के लिए प्रवेश कुंजी को सक्षम किया id।
— इयान कैंपबेल
@Upgradingdave आप "कंसोल.लॉग ()" के बजाय "लॉग ()" कैसे लिख सकते हैं?
— रेडबीएक्स
1
@radbyx ... अच्छी पकड़, यह होना चाहिए console.log, मैंने अपना जवाब अपडेट किया।
— अपग्रेडेडेव
ध्यान दें कि keypress keyup keydownयदि कोई शर्त दो बार में आप किसी भी कोड को ट्रिगर करते हैं ।
— काई नैक
56

यदि आप वास्तविक जमा करने के लिए एक स्क्रिप्ट का उपयोग करते हैं, तो आप इस तरह से ऑनसुबमिट हैंडलर में "रिटर्न झूठी" लाइन जोड़ सकते हैं:

<form onsubmit="return false;">

जावास्क्रिप्ट से फॉर्म पर कॉलिंग सबमिट () घटना को ट्रिगर नहीं करेगा।

— टॉम हबर्ड
स्रोत
Chrome में मेरे लिए काम करता है, यह सबमिट बटन को भी अक्षम कर देगा, जो ठीक है यदि आप सबमिट बटन पर ऑनलिंक-ईवेंट को ट्रिगर करना चाहते हैं। अजाक्स संकेत: रिटर्न से पहले अपना फ़ंक्शन कॉल जोड़ें और उपयोगकर्ता अभी भी पृष्ठ पर फ़ॉर्म सबमिट किए बिना एंटर कुंजी दबा सकता है।
— डेनिस हैडेन
क्रोम, IE-11 और फ़ायरफ़ॉक्स पर मेरे लिए काम किया और इसे लागू करने का सबसे सरल समाधान था। पृष्ठ के पूरे अनुभागों में प्रवेश कुंजी को अक्षम करना, जैसा कि कुछ उत्तर करते हैं, बहुत अधिक चरम लगता है और कीड़े के लिए प्रवण होता है।
— रॉबर्टो
धन्यवाद। यह मेरे लिए काम किया।
— एलयू
23

उपयोग:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

यह समाधान एक वेबसाइट पर सभी रूपों पर काम करता है (अजाक्स के साथ डाले गए रूपों पर भी), Enterजो इनपुट ग्रंथों में केवल एस को रोकता है । इसे दस्तावेज़ तैयार फ़ंक्शन में रखें, और जीवन के लिए इस समस्या को भूल जाएं।

— बुज़ोगनी लासज़्लो
स्रोत
मुझे लगता है कि मूल उत्तर e.whichठीक था; इसे बदलने की कोई जरूरत नहीं है e.keyCode। दोनों प्रवेश कुंजी के लिए मान 13 लौटाते हैं। देखें stackoverflow.com/a/4471635/292060 और stackoverflow.com/a/18184976/292060
— goodeye
2
यह समाधान दो समाधानों का ध्यान रखता है: 1.) प्रवेश पर फॉर्म जमा न करें 2.)
— पाठयक्रम
21

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

http://docs.jquery.com/Plugins/Validation

इसके लिए Enterबटन को पकड़ने की तुलना में अधिक काम करना होगा, लेकिन निश्चित रूप से यह एक समृद्ध उपयोगकर्ता अनुभव प्रदान करेगा।

— bbmud
स्रोत
13
यह अच्छा लगता है, लेकिन वैकल्पिक क्षेत्र समस्याग्रस्त हैं, उपयोगकर्ता गलती से प्रेस कर सकता है और फॉर्म सबमिट किया जाएगा। मैं यह नहीं देखता कि जब आप हर क्षेत्र में आवश्यकता के अनुसार (कोई डिफ़ॉल्ट विकल्प नहीं, कोई रिक्त फ़ील्ड की अनुमति नहीं दी जाती है) जब तक सर्वेक्षण समाप्त नहीं हो जाता है, तब तक आप कैसे जा रहे हैं ...)
— क्रिस्टोफ़ रूसो
19

एक अच्छा सा छोटा सा jQuery समाधान:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});
— Eonasdan
स्रोत
1
+1 मैं सामान्य जेएस का उपयोग करने के बजाय एक jQuery विकल्प की तलाश में था, जैसेvar key = event.keyCode || event.which; if (key == 13) return false;
— जेएसआई राफेलडीडीएल
1
तकनीकी रूप से यह अभी भी POJ है, बस एक सरल jquery आवरण के साथ। आपके द्वारा दिया गया कोड लगभग एक ही बात है।
— एनासडसन
19

मैं अभी तक टिप्पणी नहीं कर सकता, इसलिए मैं एक नया उत्तर दूंगा

स्वीकृत उत्तर ओके-ईश है, लेकिन यह numpad enter पर सबमिट नहीं रोक रहा था। कम से कम क्रोम के वर्तमान संस्करण में। मुझे इस पर कीकोड की स्थिति को बदलना पड़ा, तब यह काम करता है।

if(event.keyCode == 13 || event.keyCode == 169) {...}
— sparklos
स्रोत
5
एंटर और रिटर्न के बीच अंतर - कई पॉइंट-ऑफ-सेल्स ऑपरेटर विशेष रूप से numpad का उपयोग करते हैं। +1
— हेलोसोसेर
8
अब (05-21-2015) , दोनों सामान्य प्रवेश और अंकों के प्रवेश के लिए, कीकोड 13 है [क्रोम 42, IE 11, FIreFox 36]
— क्लिफ बर्टन
15

लक्ष्य तक पहुंचना मेरा समाधान है, यह स्वच्छ और प्रभावी है।

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});
— डेवलपर
स्रोत
13

एक पूरी तरह से अलग दृष्टिकोण:

  1. <button type="submit">फॉर्म में पहला दबाने पर सक्रिय हो जाएगा Enter।
  2. यह तब भी सही है जब बटन छिपा हो style="display:none;
  3. उस बटन की स्क्रिप्ट वापस आ सकती है false, जो सबमिशन प्रक्रिया को रद्द कर देती है।
  4. आपके पास <button type=submit>फ़ॉर्म जमा करने के लिए अभी भी दूसरा हो सकता है। अभी लौटते हैंtrue जमा करने के लिए ।
  5. दबाना Enterअसली सबमिट बटन दबाए जाने के दौरान पर असली सबमिट बटन सक्रिय हो जाएगा।
  6. Enterअंदर दबा रहा<textarea> या अन्य प्रपत्र नियंत्रणों को सामान्य व्यवहार होगा।
  7. प्रपत्र नियंत्रण के Enterअंदर दबाने <input>से पहले ट्रिगर होगा <button type=submit>, जो वापस लौटता है false, और इस प्रकार कुछ भी नहीं होता है।

इस प्रकार:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>
— Erics
स्रोत
1
हम्म, क्रोम और फ़ायरफ़ॉक्स में, एक और भी छोटा संस्करण होगा <बटन अक्षम शैली = "प्रदर्शन: कोई नहीं?"> <बटन>, जिसमें जेएस को काम करने की आवश्यकता नहीं होने का गुण भी है। सफारी बस बटन को नजरअंदाज करती है और इसलिए अन्य सामान सामान्य हो जाएगा।
— Erics
1
मुझे वास्तव में "अनदेखी 13 कीकोड" तरीका पसंद नहीं आया, इसलिए मैंने कुछ आसान और मुश्किल तरीके से सोचना शुरू कर दिया, और यह विचार मेरे दिमाग में आया और जैसा कि मैं इस पृष्ठ को नीचे स्क्रॉल कर रहा था मैंने यह धागा देखा :)। साथ ही आपसी विचार और सबसे अच्छा समाधान के लिए एक।
— जलाली शाकिब
मेरे लिए बिल्कुल सही जवाब। मैं एक सीएलआई का अनुकरण करने के लिए एक फार्म चाहता था ताकि उपयोगकर्ता प्रत्येक अगले क्षेत्र के लिए प्रवेश कर सके और फिर अंत में सबमिट हो।
— नाथन जूल
ओह शानदार, रैपिड क्लिक पर डुप्लिकेट सबमिट को रोकने के लिए अंतिम बटन इस तरह हो सकता है:<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
— Arash Moosapour
@ArashMoosapour कृपया फ़ोकस सबमिट न करें यदि उनके पास फ़ोकस है - तो ऐसा करने से फ़ोकस फ़ोकस हो जाता है और पहुँच में गड़बड़ी होती है।
— Erics
9

प्रपत्र को 'जावास्क्रिप्ट: ए शून्य (0);' चालबाजी करने लगता है

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>
— sidarcy
स्रोत
8

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

बल्कि इस का उपयोग करें

<input type="button">

इसके उपयोग से

<input type="submit">
— जिमवेल एनोबॉन्ग
स्रोत
8
  1. इनपुट्स या बटन के लिए टाइप = "सबमिट" का उपयोग न करें ।
  2. का प्रयोग करें प्रकार = "बटन" और उपयोग js [Jquery / कोणीय / आदि] सर्वर के लिए प्रपत्र प्रस्तुत करने के लिए।
— इरफान अशरफ
स्रोत
7

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

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

और यह jQuery कोड:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

वैकल्पिक रूप से, यदि कीडाउन अपर्याप्त है:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

कुछ नोट:

यहाँ विभिन्न अच्छे उत्तरों को संशोधित करते हुए, Enterकुंजी keydownसभी ब्राउज़रों के लिए काम करती है। विकल्प के लिए, मैंने विधि bind()को अद्यतन किया on()।

मैं वर्ग चयनकर्ताओं का बहुत बड़ा प्रशंसक हूं, सभी पेशेवरों और विपक्ष और प्रदर्शन चर्चाओं का वजन। JQuery को इंगित करने के लिए मेरा नामकरण सम्मेलन 'idSomething' है, इसे CSS स्टाइल से अलग करने के लिए इसे id के रूप में उपयोग किया जा रहा है।

— अच्छी नज़र
स्रोत
यह प्रपत्र में टेक्स्टबॉक्स तत्वों पर काम करता है। जैसे ही आप टाइप करते हैं, और टेक्स्ट बॉक्स में एंट्री मारते हैं, डिफॉल्ट व्यवहार फॉर्म को सबमिट कर देता है। यह एंटर कुंजी को स्वीकार करता है और इसे सबमिट करने से रोकता है।
— गोयडे
5

आप यह देख सकते हैं कि Enterकुंजी हिट हुई थी या नहीं, यह देखने के लिए एक जावास्क्रिप्ट विधि बना सकते हैं ।

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

बस उसे सबमिट विधि पर कॉल करें।

— ब्रैंडन
स्रोत
4

केवल ब्लॉक सबमिट करें लेकिन अन्य महत्वपूर्ण नहीं, एंटर कुंजी की महत्वपूर्ण कार्यक्षमता, जैसे कि <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}
input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}
<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>
स्निपेट का विस्तार करें

— mate.gwozdz
स्रोत
सोच रहा था कि कौन और क्यों इसको नीचा दिखाएगा: | मेरे समाधान के साथ क्या समस्या है?
— mate.gwozdz 13
योगदान के लिए अपग्रेड किया गया। स्वीकृत उत्तर सबसे अधिक रूप से यूआई को तोड़ता है, जिससे "प्रवेश" को पूरे आवेदन पर पंजीकृत होने से रोका जा सकता है। अच्छा नही। मुझे लगता है कि फार्म तत्वों में प्रवेश करने की अनुमति देना एक अच्छा विचार है, विशेष रूप से बटन इसलिए मुझे वह रास्ता पसंद है जो आप नीचे जा रहे हैं। मुझे लगता है कि यह बिना टाइमआउट के हासिल किया जा सकता है। उदाहरण के लिए, बस अपने ईवेंट हैंडलर में तत्व विशेषता को देखें। 'बटन' और 'सबमिट' की अनुमति दें
— Solvitieg
@ नथनच - यह कोड आप जो कह रहे हैं, उससे बिल्कुल विपरीत है। यह केवल फॉर्म जमा करने से रोकता है और किसी अन्य कार्यक्षमता को रोकता नहीं है - उदाहरण के लिए, आपके पास एक पाठ क्षेत्र हो सकता है और नए पैराग्राफ बनाने के लिए प्रवेश का उपयोग करना चाहता है।
— mate.gwozdz
1
पहली पंक्ति में एक टाइपो है। इसके बजाय function(e)यह होना चाहिए function(event)। अन्यथा, यह मेरे लिए काम करता है। धन्यवाद।
— गिलर्मो प्रांडी
1
यह एक पूर्ण जीवन शैली है, क्योंकि बाकी सभी चीजें मुझे ग्रिड इनलाइन संपादन जैसी चीजों के लिए घटनाओं को बचाने के लिए ठीक से संभालने से रोकती हैं। एकमात्र सुझाव यह है कि 'सेटटाइमआउट' का उपयोग बिल्कुल न किया जाए। मुझे लगता है कि इस समस्या के लोगों को इस जवाब के साथ है। यह बहुत ही नकचढ़ा है। इसके बजाय, ईवेंट करें on("keydown", function(event) { enterPressed = true; }और फिर सबमिट ईवेंट के लिए, on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}यह सुनिश्चित करें कि यह बिना किसी देरी के काम करता है।
— कर्टिस स्नोडेन
3

यह एकदम सही तरीका है, आप अपने पृष्ठ से पुनर्निर्देशित नहीं होंगे

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});
— रिफाकन रजाक
स्रोत
2

मुझे एक अनुकरणीय समस्या थी, जहां मुझे "अजाक्स टेक्स्टफील्ड्स" (Yii CGridView) और बस एक सबमिट बटन के साथ एक ग्रिड था। हर बार मैंने एक टेक्स्टफील्ड पर एक खोज की और सबमिट किए गए फॉर्म में प्रवेश किया। मुझे बटन के साथ कुछ करना था क्योंकि यह विचारों (एमवीसी पैटर्न) के बीच एकमात्र सामान्य बटन था। मुझे बस इतना करना था कि हटाओ type="submit"और डाल दोonclick="document.forms[0].submit()

— StackUnder
स्रोत
2

मुझे लगता है कि यह सभी उत्तरों के साथ अच्छी तरह से कवर किया गया है, लेकिन अगर आप कुछ जावास्क्रिप्ट सत्यापन कोड के साथ एक बटन का उपयोग कर रहे हैं, तो आप अपने सबमिट को अपेक्षित रूप से कॉल करने के लिए Enter का ऑनकीप्रेस सेट कर सकते हैं:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Onkeypress JS आपको जो भी करने की आवश्यकता है वह हो सकता है। बड़े, वैश्विक परिवर्तन की कोई आवश्यकता नहीं है। यह विशेष रूप से सच है यदि आप ऐप को स्क्रैच से कोडिंग नहीं कर रहे हैं, और आपको किसी और की वेब साइट को अलग किए बिना इसे ठीक करने और इसे पुन: परीक्षण करने के लिए लाया गया है।

— garlicman
स्रोत
मुझे टॉम हुबर्ड के जवाब पर इसके एक संस्करण का एहसास हुआ, जो कि मैंने + 1 लिया क्योंकि इसका वास्तव में मैंने खुद को आज किया था ताकि दूसरे विचारों को खोजा जा सके।
— लहसुन का रस
2

यहां पहले से ही कई अच्छे जवाब हैं, मैं सिर्फ यूएक्स के नजरिए से कुछ योगदान देना चाहता हूं। रूपों में कीबोर्ड नियंत्रण बहुत हैं महत्वपूर्ण हैं।

सवाल यह है कि कीपर पर सबमिट करने से कैसे निष्क्रिय किया जाए Enter। Enterएक पूरे आवेदन में नजरअंदाज करने के लिए नहीं । इसलिए हैंडलर को एक फॉर्म एलिमेंट से जोड़ने पर विचार करें, न कि विंडो पर।

Enterफ़ॉर्म जमा करने के लिए अक्षम करने के बाद भी निम्नलिखित की अनुमति होनी चाहिए:

  1. Enterसबमिट बटन के माध्यम से फॉर्म जमा करने पर ध्यान केंद्रित किया जाता है।
  2. सभी फ़ील्ड पॉप्युलेट होने पर फ़ॉर्म सबमिट करना।
  3. के माध्यम से गैर-सबमिट बटन के साथ सहभागिता Enter।

यह सिर्फ बॉयलरप्लेट है लेकिन यह तीनों स्थितियों का अनुसरण करता है।

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});
स्निपेट का विस्तार करें

— Solvitieg
स्रोत
1

ऐसा कुछ जो मैंने यहाँ उत्तर में नहीं देखा है: जब आप पृष्ठ पर तत्वों के माध्यम से टैब करते हैं, Enterतो जब आप सबमिट बटन पर पहुंचते हैं तो दबाने पर फॉर्म पर ऑनसुबमिट हैंडलर को ट्रिगर किया जाएगा, लेकिन यह माउसइवेंट के रूप में घटना को रिकॉर्ड करेगा। यहाँ अधिकांश ठिकानों को कवर करने के लिए मेरा छोटा उपाय है:

यह jQuery से संबंधित उत्तर नहीं है

एचटीएमएल

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

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

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

एक कामकाजी उदाहरण खोजने के लिए: https://jsfiddle.net/nemesarial/6rhogva2/

— Nemesarial
स्रोत
0

मेरे विशिष्ट मामले में मुझे फॉर्म जमा करने से ENTER रोकना था और सबमिट बटन पर क्लिक करने का अनुकरण भी करना था। ऐसा इसलिए है क्योंकि सबमिट बटन पर एक क्लिक हैंडलर था क्योंकि हम एक मोडल विंडो (पुराने कोड को विरासत में मिला) के भीतर थे। किसी भी मामले में इस मामले के लिए मेरे कॉम्बो समाधान हैं।

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

यह उपयोग मामला विशेष रूप से IE8 के साथ काम करने वाले लोगों के लिए उपयोगी है।

— पथरी
स्रोत
0

यह मेरे लिए काम करता है 

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});
— PJL
स्रोत
0

मैं एक छोटा सा कॉफीस्क्रिप्ट कोड जोड़ना चाहूंगा (फ़ील्ड परीक्षण नहीं):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(मुझे उम्मीद है कि जब तक आप खंड में अच्छी चाल पसंद करते हैं।)

— EDX
स्रोत
0

जावास्क्रिप्ट का उपयोग करना (बिना किसी इनपुट फ़ील्ड की जाँच):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

यदि कोई इसे विशिष्ट क्षेत्रों पर लागू करना चाहता है, उदाहरण के लिए इनपुट टाइप टेक्स्ट:

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

यह मेरे मामले में अच्छा काम करता है।

— वकार आलमगीर
स्रोत
0

अपनी सीएसएस में जाएं और इसे इसमें जोड़ें, तब तक अपने फॉर्मूला को जमा करने से तब तक स्वचालित रूप से रोक दिया जाएगा जब तक आपके पास इनपुट जमा नहीं हो जाता है यदि आप नहीं चाहते हैं कि आप इसे हटा सकते हैं या टाइप कर सकते हैं activateऔर deactivateइसके बजाय

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }
— लार्स ग्रॉस
स्रोत
0

आप javascript:void(0)फॉर्म सबमिशन को रोकने के लिए भी उपयोग कर सकते हैं ।

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>
स्निपेट का विस्तार करें

— निशार शाह
स्रोत
जब आप विशेष रूप method="post"से अपने फार्म पर काम नहीं करते हैं । उदाहरण के लिए, मैं चाहता हूं कि फॉर्म बटन द्वारा सबमिट किया जाए, लेकिन इनपुट में केंद्रित होने पर एंटर दबाते समय नहीं।
— सोलस्टेस्ट नोव
उस स्थिति के लिए आप उपरोक्त उत्तरों का उपयोग कर सकते हैं क्योंकि यह उत्तर प्रवेश द्वारा फ़ॉर्म सबमिट को रोकने और दोनों पर क्लिक करने पर आधारित है। उपरोक्त उदाहरण के method="post"रूप में है और इसके काम करता है, फिर से जाँच करें।
— निशाग्र शाह
-2

यह अन्य समाधानों के साथ बहुत निराशा के बाद सभी ब्राउज़रों में मेरे लिए काम किया है। Name_space बाहरी फ़ंक्शन केवल ग्लोबल्स घोषित करने से दूर रहने के लिए है, कुछ मैं भी सुझाता हूं।

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

नमूना उपयोग:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});
— crizCraig
स्रोत
-2

उपयोग:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>
— तापस पाल
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.