एंटर कीपर पर मोडल आउट से बचें

108

मैंने इसके अंदर एक फॉर्म के साथ एक बूटस्ट्रैप मोडल स्थापित किया है, मैंने अभी देखा है कि जब मैं Enter कुंजी दबाता हूं, तो मोडल खारिज हो जाता है। क्या एंटर दबाने पर इसे खारिज करने का कोई तरीका नहीं है?

मैंने कीबोर्ड के साथ मोडल को सक्रिय करने की कोशिश की: झूठी, लेकिन यह केवल ईएससी कुंजी के साथ बर्खास्तगी को रोकता है।

forms twitter-bootstrap modal-dialog

— ल्यूक मॉर्गन
स्रोत

मुझे यह सवाल पसंद है। क्यों न केवल प्लगइन के स्रोत कोड को संपादित करें?

— रयान

मैं उस पर एक नज़र डालूंगा, अगर मुझे कुछ उपयोगी लगता है तो मैं संपादित करूँगा। इस बीच, मुझे आशा है कि किसी को उत्तर पता है।

— ल्यूक मॉर्गन

मैं click.dismiss.modal से कीअप में बदल गया, यह ठीक लगता है, मैं बाद में दोबारा देखूंगा कि क्या मैंने कुछ और देखा है

— ल्यूक मॉर्गन

युप, कि बटन खराब हो गए (मैंने एक ओनलाइन क्लिक किया = "$ ('# साइनइनमॉडल')। मोडल ('छिपाने');" उन समस्याओं से बचने के लिए, अब सब कुछ ठीक है, ऐसा लगता है)

— ल्यूक मॉर्गन

122

मुझे भी बस यही समस्या थी।
मेरी समस्या यह थी कि मेरे मोडल में एक करीबी बटन था

<button class="close" data-dismiss="modal">&times;</button>

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

<a class="close" data-dismiss="modal">&times;</a>

आपके स्रोत को देखे बिना, मैं पुष्टि नहीं कर सकता कि आपका कारण समान है।

— विश
स्रोत

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

— ल्यूक मॉर्गन

मुझे ऊपरी दाहिने हाथ के कोने पर बटन दिखाई नहीं दिया, यही समस्या थी। अब यह ठीक काम करता है, धन्यवाद!

— ल्यूक मॉर्गन

+1, उत्कृष्ट खोज! मुझे आश्चर्य है कि अगर किसी ने इसे बूटस्ट्रैप इश्यू ट्रैकर में डाला है? मैं इस समय जाँच करने के लिए बहुत आलसी हूँ। शायद दोपहर के भोजन के बाद।

— एंड्रयू

8

यह केवल एक बटन मुद्दा नहीं है। मैंने अपने मोडल से सभी बटन हटा दिए हैं (ऊपरी दाएँ "x" सहित), लेकिन अगर मेरे पास एक एकल फ़ॉर्म टेक्स्ट फ़ील्ड है, तो Enter दबाकर डायल को खारिज कर दिया जाएगा। अजीब बात है कि यह केवल एक समस्या है जब कोई एकल पाठ फ़ील्ड है। एक बार जब मेरे पास दो होते हैं, तो एंटर मॉडल को खारिज नहीं करता है चाहे जिस क्षेत्र में फोकस हो।

— जिप्सिन

11

कोई भी रद्द बटन पर टाइप = "बटन" का उपयोग कर सकता है

— मुय्याद अलसादी

77

बस बटन तत्व में टाइप = "बटन" विशेषता जोड़ें , कुछ ब्राउज़र डिफ़ॉल्ट रूप से सबमिट किए गए प्रकार की व्याख्या करते हैं ।

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

यह आपके द्वारा संचालित मोडल के सभी बटनों के लिए लागू होता है।

<button type="button" class="close" data-dismiss="modal">×</button>

— jcalonso
स्रोत

19

मेरे बूटस्ट्रैप मोडल से सभी बटन हटाने के बाद भी मुझे यह समस्या थी, इसलिए यहां किसी भी समाधान ने मेरी मदद नहीं की।

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

मेरा समाधान था कि फॉर्म को ऑनसुबमिट करने के लिए ऑनसबमिट = "असत्य लौटाएं"

यदि आप वास्तव में सबमिट इवेंट का उपयोग कर रहे हैं तो यह एक समस्या हो सकती है, लेकिन मैं जेएस फ्रेमवर्क का उपयोग कर रहा हूं जो ब्राउज़र सबमिट करने के बजाय AJAX अनुरोधों को उत्पन्न करता है, इसलिए मैं पूरी तरह से सबमिट को अक्षम करना पसंद करता हूं। (इसका मतलब यह भी है कि मुझे हर फॉर्म एलिमेंट को मैन्युअली ट्विस्ट नहीं करना पड़ेगा जो सबमिट को ट्रिगर कर सकता है)।

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

— jpeskin
स्रोत

2

type="button"मेरे पास पहले से ही मेरे सभी क्लोज / कैंसल बटन थे, लेकिन फिर भी यह समस्या थी कि मैं अपने मोडल को बंद कर देता था। मेरे मोडल में सिर्फ 1 इनपुट टेक्स्ट फील्ड था, और आपके समाधान ने इसे ठीक कर दिया। आपके उत्तर के लिए धन्यवाद!

— डैरेन पार्कर

7

आप कैंसल बटन से पहले लॉगिन बटन डाल सकते हैं और इससे आपकी समस्या भी हल हो जाएगी।

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>

— रयान
स्रोत

6

रद्द नहीं किया जाना चाहिए टाइप जमा

— मैनटैक्स

5

मेरे पास एक ही समस्या थी, और मैंने इसे हल किया

<form onsubmit="return false;">

लेकिन एक और उपाय है, आप डमी अदृश्य इनपुट जोड़ सकते हैं, इसलिए आपका फॉर्म इस तरह दिखाई देगा:

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>

— इगोर लवरीक
स्रोत

3

मेरे पास अभी भी ऐसा ही अनुभव था और जिस तरह से मैंने इसे हल किया वह एक टैग का उपयोग करने के बजाय था, मैंने टैग को टाइप = बटन के साथ टैग में बदल दिया। यह "एंटर" कुंजी दबाने और बूटस्ट्रैप मोडल को खारिज करने की समस्या को हल करने के लिए लग रहा था।

— wmock
स्रोत

2

मुझे भी यह समस्या थी और मैंने इसे इस तरह हल किया। मैंने फॉर्म बनाने के लिए ऑनसाइट जमा किया। मैं भी एक बचत कुंजी के रूप में प्रवेश कुंजी का उपयोग करने में सक्षम होना चाहता था इसलिए मैंने ऑनसुबमिट में save_stuff () जावास्क्रिप्ट जोड़ी। विवरण झूठा है; फॉर्म सबमिट को रोकने के लिए उपयोग किया जाता है।

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>

— Firze
स्रोत