ट्रिगर बटन पर क्लिक करें दर्ज करें


168

मेरे पास एक पृष्ठ है जिसमें दो बटन हैं। एक <button>तत्व है और दूसरा एक है <input type="submit">। उस क्रम में पृष्ठ पर बटन दिखाई देते हैं। यदि मैं फ़ॉर्म और प्रेस में कहीं भी टेक्स्ट फ़ील्ड में हूँ <Enter>, तो बटन एलिमेंट का clickईवेंट ट्रिगर हो जाता है। मुझे लगता है कि क्योंकि बटन तत्व पहले बैठता है।

मुझे डिफ़ॉल्ट बटन सेट करने का एक विश्वसनीय तरीका जैसा कुछ भी नहीं मिल रहा है, और न ही मैं इस बिंदु पर आवश्यक रूप से चाहता हूं। कुछ भी बेहतर नहीं होने की स्थिति में, मैंने फॉर्म पर कहीं भी एक कीपर कैप्चर किया है और यदि वह <Enter>कुंजी है जिसे दबाया गया है, तो मैं इसे नकार रहा हूं:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

जहां तक ​​मैं बता सकता हूं, यह काम कर रहा है, लेकिन यह अविश्वसनीय रूप से हैम-फेन लगता है।

क्या किसी को ऐसा करने के लिए एक अधिक परिष्कृत तकनीक का पता है?

इसी तरह, क्या इस समाधान के लिए कोई नुकसान है जो मुझे नहीं पता है?

धन्यवाद।


1
यह तब हो सकता है जब कोणीय प्रतिक्रियाशील रूपों का उपयोग करते हुए, न केवल JQuery के लिए उपयोगी हो, बल्कि कोणीय विकास के लिए भी।
HDJEMAI

जवाबों:


362

का उपयोग करते हुए

<button type="button">Whatever</button>

चाल चलनी चाहिए।

इसका कारण यह है कि एक फॉर्म के अंदर एक बटन का प्रकार स्पष्ट रूप से सेट होता है submit। जैसा कि zzzzBoz कहता है, Spec कहता है कि इस स्थिति में पहले buttonया उसके inputसाथ type="submit"ट्रिगर किया गया है। यदि आप विशेष रूप से सेट करते हैं type="button", तो यह ब्राउज़र द्वारा विचार से हटा दिया जाता है।


1
मीठा, धन्यवाद, IE8 में बटन की तरह लगता है मेरे लिए कैप्चरिंग <दर्ज करें> क्लिक, type="button"यह हल करने के लिए लगता है ... धन्यवाद! ps किसी भी विचार के रूप में यह क्यों है? ie8 टाइप बटन के रूप में इलाज बटन? अजीब।
क्वांग वान

3
अच्छा जवाब, यह ब्राउज़र को संकेत देता है कि कौन से बटन बटन सबमिट नहीं कर रहे हैं, इसलिए यह मार्कअप को फिर से व्यवस्थित किए बिना सही काम कर सकता है।
डॉन स्पाडलिंग 16

2
@ लेइनस्टर के उत्तर में इस विचित्रता के कारण को शामिल किया गया है - "बिना किसी प्रकार के विशेषता वाले बटन को उसी प्रकार माना जाता है, जिस प्रकार के बटन को सबमिट करने के लिए सेट किया गया है।"
बाल्टी

2
उसी के लिए लागू होता है <input type="submit"/>(क्लिक ट्रिगर होगा) और <input type="button"/>(क्लिक ट्रिगर नहीं होगा)
Marius Balčytis

1
अविश्वसनीय!! मैं बहुत उलझन में था।
मार्गस पाला

54

यह समझने के लिए कि क्या व्यवहार किया जाना है, वास्तव में समझने के लिए HTML विशिष्टताओं को पढ़ना महत्वपूर्ण है:

एचटीएमएल 5 कल्पना स्पष्ट रूप से कहा कि क्या में क्या होता हैimplicit submissions :

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

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

यह HTML4 कल्पना में स्पष्ट नहीं किया गया था, हालांकि ब्राउज़र पहले से ही लागू कर रहे हैं जो HTML5 कल्पना में वर्णित है (यही कारण है कि इसे स्पष्ट रूप से शामिल किया गया है)।

जोड़ने के लिए संपादित करें:

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


वहाँ मैं IE को कोस रहा था, यह सब मेरे साथ मैला मार्कअप था! चीयर्स!
शॉनसन

2
वाह ... शुक्रिया सर। यह एक आकस्मिक खोज थी। मैं इस बात पर भी ध्यान नहीं दे सका कि क्यों एक क्लिक इवेंट को एंटर की को हिट करने से निकाल दिया जा रहा है, लेकिन आपकी बोली ने मुझे w3.org/TR/html5/forms.html#implicit-submission
chemoish

लिंक टूट गया है। मुझे लगता है कि w3c.github.io/html/sec-forms.html#implicit-submission नया url है।
टीजे

22

मुझे नहीं लगता कि आपको इसे ठीक करने के लिए जावास्क्रिप्ट या CSS की आवश्यकता है।

Html 5 युक्ति के अनुसार बटन के लिए कोई बटन बिना किसी प्रकार की विशेषता वाले बटन को उसी प्रकार के बटन के साथ व्यवहार किया जाता है, जिसके प्रकार "सबमिट" करने के लिए सेट होते हैं, अर्थात एक बटन के रूप में, जिसमें अपना फॉर्म जमा करना होता है। बटन के प्रकार को "बटन" पर सेट करने से आपके द्वारा देखे जाने वाले व्यवहार को रोका जाना चाहिए।

मुझे इसके लिए ब्राउज़र समर्थन के बारे में निश्चित नहीं है, लेकिन बटन के लिए html 4.01 कल्पना में समान व्यवहार निर्दिष्ट किया गया था, इसलिए मुझे उम्मीद है कि यह बहुत अच्छा है।


13

ध्यान केंद्रित पर 'दर्ज' दबाकर <input type="text">आप पहले तैनात तत्व पर 'क्लिक' घटना ट्रिगर: <button>या <input type="submit">। यदि आप 'एन्टर' दबाते हैं <textarea>, तो आप एक नई टेक्स्ट लाइन बनाते हैं।

उदाहरण यहाँ देखें ।

आपका कोड एक नई टेक्स्ट लाइन बनाने के लिए रोकता है <textarea>, इसलिए आपको केवल कुंजी प्रेस को पकड़ना होगा <input type="text">

लेकिन आपको Enterटेक्स्ट फील्ड में प्रेस करने की आवश्यकता क्यों है ? यदि आप 'एन्टर' दबाकर फॉर्म जमा करना चाहते हैं, लेकिन <button>लेआउट में सबसे पहले रहना चाहिए, तो बस मार्कअप के साथ खेलें: <input type="submit">कोड को उस से पहले रखें <button>और लेआउट का उपयोग करें जिसे आपको ज़रूरत है।

पकड़ने 'दर्ज' और बचत मार्कअप:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

यदि दोनों बयानों को दर्ज करने के लिए दबाव डाला जाता है, तो क्या इस बयान पर रोक नहीं होनी चाहिए? अन्यथा सबमिट हर कुंजी प्रेस के लिए होगा। मुझे याद दिलाता है कि गोटो विफल है। :)
डेनिमज़र

13

जहां आप कभी भी <button>डिफ़ॉल्ट रूप से किसी तत्व का उपयोग type="submit"करते हैं, type="button"तो वह उस बटन पर विचार करता है, इसलिए यदि आप बटन को परिभाषित करते हैं तो यह उस <button>बटन के रूप में प्रस्तुत नहीं करेगा ।


2

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


4
मुझे नहीं लगता कि मुद्दा यह है कि फॉर्म सबमिट होता है, यह है कि यह clickबटन तत्वों पर कार्रवाई को ट्रिगर करता है इच्छा एक अनपेक्षित परिणाम है
मार्टिन जेस्पर्सन

तुम सही हो। किसी भी तरह से, परिणाम समान है - आपको अवांछित फॉर्म सबमिट्स को रोकने के लिए एंटर कुंजी पर कब्जा करना होगा।
Sparafusile

2

आप उपयुक्त समय तक फॉर्म जमा को ब्लॉक करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। एक बहुत ही क्रूड उदाहरण:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

एंटर दबाना अभी भी सबमिट करने के लिए फ़ॉर्म को ट्रिगर करेगा, लेकिन जावास्क्रिप्ट इसे वास्तव में सबमिट करने से रखेगा, जब तक आप वास्तव में बटन दबाते हैं।


2

डोम उदाहरण

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

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

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

यदि आप stopDefault () का उपयोग नहीं करते हैं, तो अन्य बटन ट्रिगर हो जाएंगे।


0

मैं इसे निम्न की तरह करूंगा: बटन के ऑनक्लिक ईवेंट के लिए हैंडलर में (सबमिट न करें) ईवेंट ऑब्जेक्ट के कीकोड की जांच करें। यदि यह "दर्ज" है तो मैं झूठे लौटाऊंगा।


वह कीकोड हमेशा पास किया जा रहा है क्योंकि यह एक क्लिक था। उसमें समस्या है। :-)
रोब विल्करसन

तब मुझे लगता है कि आप इसे कठिन तरीके से करते हैं - बटन पर ऑनकीडाउन घटना को भी संभाल लें। हैंडलर को एक कुंजी पारित किया जाएगा; KeyCode की जांच करें -> अगर 13, रोकाफॉल्ट। इस तरह से आप वास्तव में उपयोगकर्ताओं को उस बटन पर क्लिक करने के साथ-साथ क्लिक इवेंट को निष्पादित करने के साइड इफेक्ट के बिना प्रेस कर सकते हैं।
सत्यजीत

0

मेरी स्थिति में Submitफार्म तत्व के भीतर दो बटन हैं: Updateऔर DeleteDeleteबटन एक चित्र को हटा दे और Updateबटन के रूप में पाठ क्षेत्रों के साथ डेटाबेस अद्यतन करता है।

क्योंकि Deleteबटन पहले फॉर्म में था, यह Enterकुंजी पर डिफ़ॉल्ट बटन था । वो नहीं जो मैं चाहता था। उपयोगकर्ता Enterकुछ पाठ फ़ील्ड बदलने के बाद हिट करने में सक्षम होने की उम्मीद करेगा ।

मुझे यहाँ डिफ़ॉल्ट बटन सेट करने का अपना उत्तर मिला :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

किसी भी स्क्रिप्ट का उपयोग किए बिना, मैंने उस फॉर्म को परिभाषित किया जो प्रत्येक बटन <button> form="bla"विशेषता का उपयोग करने के लिए है। मैंने उस Deleteबटन को एक ऐसे रूप में सेट किया है जो मौजूद नहीं है और Updateबटन को सेट करना चाहता हूं जो उस Enterकुंजी को ट्रिगर करना चाहता है जो उपयोगकर्ता को पाठ में प्रवेश करते समय होगा।

यह केवल एक चीज है जिसने मेरे लिए अब तक काम किया है।


1
कृपया जांच करें कि
मोर्स

0

आप ऐसा कुछ कर सकते हैं।

अपने ईवेंट को एक सामान्य फ़ंक्शन में बांधें और ईवेंट को या तो कीपर या बटन क्लिक के साथ कॉल करें।

उदाहरण के लिए।

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

-1

मैंने फ़ॉर्म के पहले तत्व के रूप में "सबमिट" प्रकार का एक बटन जोड़ा और इसे अदृश्य ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;) बना दिया । साइट के रिफ्रेश की तरह काम करता है, यानी बटन को दबाने पर मैं कुछ नहीं करता, सिवाय इसके कि साइट फिर से लोड हो जाए। मेरे लिए ठीक काम करता है ...

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.