बटन क्लिक करें घटना आग जब अलग इनपुट में कुंजी दबाएं (कोई रूप नहीं)


111

यह तर्क "राशि" इनपुट में "एंटर" दबाते समय फायरिंग है, और मुझे विश्वास नहीं है कि इसे (क्रोम में नहीं है)। मैं इसे कैसे रोक सकता हूं, और यदि IE में इसे रोका नहीं जाता है, तो इसे संभाल लें ताकि क्लिक इवेंट में तर्क आग न लगे।

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

लिपि

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • जेकरी: 1.7.2
  • IE 9
  • (क्रोम में काम करता है)

1
सवाल के विपरीत, यह सिर्फ मेरे साथ क्रोम और फ़ायरफ़ॉक्स के साथ हुआ। हालांकि एक ही तय (बटन प्रकार)।
टिम ग्रांट

जवाबों:


324

मुझे एक ही समस्या थी और इसे तत्व में type="button"विशेषता जोड़कर हल किया गया था <button>, जिसके द्वारा IE एक सबमिट बटन (जो एक <button>तत्व का डिफ़ॉल्ट व्यवहार है ) के बजाय एक साधारण बटन के रूप में सोचता है ।


6
मैं फ़ायरफ़ॉक्स के साथ एक ही समस्या थी। प्रकार = "बटन" विशेषता ने भी इसे मेरे लिए हल कर दिया
अलेक्जेंडर फ्राडिएनी

109
आप एक हजार साल जी सकते हैं।
TheBrain

4
बहुत बढ़िया तय। मैंने सोचा था कि ब्राउज़र केवल "फ़ॉर्म" पर <-> टैग के अंदर ऑटो सबमिट करेंगे। लेकिन मुझे लगता है कि मैं गलत था।
क्लेटन बेल

2
IE9 पर चिल्लाने के दिन (मेरी सामान्य चिल्लाहट के बीच अन्य चीजों पर मुझे चिल्लाना पड़ता है) और यह समाधान था। गर्म खतरा।
फाट्स्कैट

5
सिर्फ दो सप्ताह में इस मुद्दे से दो बार काटे गए। बस type="button"एक <button>तत्व में कॉल करने के लिए अजीब लगता है । हाहा ... :) उम्मीद है कि अगली बार मुझे यह याद होगा।
सैम

32

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

आप IE के डिफ़ॉल्ट व्यवहार को रोकने के लिए ओवरडाइट () के साथ ओवरराइड करना होगा। अपने jQuery चयनकर्ता में, उस डिव में रखें जिसमें वह टेक्स्ट बॉक्स है जिसे आप एंटर कुंजी को अनदेखा करना चाहते हैं - आपके मामले में, "पेज" div। पूरे डिव का चयन करने के बजाय, आप उन पाठ बक्सों को भी निर्दिष्ट कर सकते हैं जिन्हें आप विशेष रूप से अनदेखा करना चाहते हैं।

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

सबसे अच्छा समाधान जब आपको कस्टम डेटासेट का उपयोग करने की आवश्यकता होती है, और आप टाइप नहीं कर सकते हैं = "बटन"।
फायरजेनक

धन्यवाद क्लिंटन, यह मेरे लिए काम किया। मैंने पहले सभी प्रकार के "बटन" बनाने की कोशिश की फिर भी यह काम नहीं किया। फिर मुझे एंटर की प्रेस पर बबलिंग इवेंट को दबाना पड़ा।
रुपेश कुमार तिवारी

बहुत बहुत धन्यवाद। मैं पिछले 2 घंटे से अपने कंप्यूटर पर हंगामा कर रहा हूं।
एडविन

4

मैं ASP.NET WebForms के साथ यह समस्या आ रहा था:

<asp:Button />

इसे केवल टाइप = "बटन" जोड़कर हल नहीं किया जा सकता है क्योंकि ASP.NET इसे टाइप = "सबमिट" के साथ बदल देता है (यदि आप तत्व का निरीक्षण करते हैं तो आप ब्राउज़र में इस व्यवहार को देख सकते हैं।)

Asp.net में ऐसा करने का सही तरीका जोड़ना है

<asp:Button UseSubmitBehavior="false" />

बटन के लिए। ASP स्वचालित रूप से = "बटन" विशेषता जोड़ देगा।


2

IE सोचता है कि कोई भी buttonतत्व एक सबमिट बटन है (चाहे आपके पास है formया नहीं)। यह Enterएक निहित तत्व के रूप में कुंजी के प्रेस को एक निहित रूप में भी प्रस्तुत करता है। इसलिए, चूंकि यह सोचता है कि आप अपना फॉर्म जमा करने की कोशिश कर रहे हैं, इसलिए यह आंकड़े आपको इस clickघटना को आग लगाने और (यह क्या सोचता है) सबमिट बटन पर आग लगाने में मदद करेगा ।

तुम एक संलग्न कर सकते हैं keyupया तो करने के लिए घटना inputया buttonऔर के लिए जाँच Enterकुंजी ( e.which === 13) औरreturn false;


1

एक jQuery आधारित समाधान जो हर बटन के लिए ऐसा करता है:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

हालाँकि क्लिक की घटना अभी भी किसी कारण से मूल तत्वों तक फैल जाएगी ...


0

क्रोम के लिए आप जोड़ सकते हैं <button type="submit" style="display:none"/> क्योंकि क्रोम डिफ़ॉल्ट बटन प्रकार "सबमिट करें" है

IE के लिए, मैंने उसी के साथ प्रयास किया है type="button"(IE डिफ़ॉल्ट बटन प्रकार "बटन" है) लेकिन अच्छी तरह से काम नहीं किया।

तो यहाँ समाधान है। HTML (keypress)=xxx($event)में अपने फॉर्म में जोड़ें । टीएस में,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

उपरोक्त सभी परिदृश्यों में काम करेगा जैसे क्रॉस ब्राउज़र, सामान्य क्लिक और टैब फ्लो।

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