एक पाठ इनपुट फ़ील्ड के साथ बूटस्ट्रैप मोडल डायलॉग हमेशा एंटर कुंजी

Question

पर खारिज करते हैं क्यों एक टेक्स्ट फ़ील्ड (और कोई बटन) के साथ यह सरल मोडल डायलॉग फ़ील्ड पर फोकस होने पर खुलता है और एंटर दबाया जाता है?

<a href="#dlgAddDeviceFolder" class="add-device-folder" data-toggle="modal">New Folder</a> 

<div id="dlgAddDeviceFolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dlgAddFolderLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <!--<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>--> 
    <h3 id="myModalLabel">Add Device Folder</h3> 
    </div> 

    <div class="modal-body"> 
    <form class="form-horizontal"> 
     <div class="control-group"> 
     <label class="control-label" for="dlgAddDeviceFolder_name">Folder Name</label> 
     <div class="controls"> 
      <input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" autocomplete="off"> 
     </div> 
     </div> 
    </form> 
    </div> 

    <div class="modal-footer"> 
    <!--<a type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>--> 
    <!--<a id="dlgAddDeviceFolder_btnOk" type="button" class="btn btn-primary">OK</a>--> 
    </div> 
</div> 

व्यापक चर्चा here है कि यह एक बटन मुद्दा है (बटन और एंकर टैग पर मैं प्रकार = "बटन" डाल दिया है। मैं लंगर के लिए बटन टैग परिवर्तित कर दिया है) से पता चलता है। हालांकि, मैंने प्रस्तावित सभी समाधानों का प्रयास किया और फिर बटन को पूरी तरह से टिप्पणी करने के लिए समाप्त हो गया, और यह अभी भी होता है।

ध्यान दें कि अगर आप बस एक ही पाठ इनपुट नकल और दो क्षेत्रों है, समस्या दूर हो जाने (या तो पाठ क्षेत्र पर ध्यान केंद्रित कर दर्ज पर बर्खास्तगी का कारण नहीं बनेगा) मुझे सही में ओर इशारा करते हुए के लिए @mccannf को

Answer 1

धन्यवाद दिशा। ऐसा लगता है कि बूटस्ट्रैप के लिए विशिष्ट किसी भी चीज़ से समस्या सबमिट करना एक सामान्य प्रपत्र है। दो समाधान:

1. फ़ॉर्म की ऑनसममिट विशेषता ऑनसबमिट = "वापसी झूठी;" पर सेट करें (https://stackoverflow.com/a/1329168/569091)

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

तो, मूल प्रश्न से मेरे उदाहरण में:

<form class="form-horizontal" onsubmit="return false"> 

2. onkeydown सेट (या onkeyup?) झूठी वापस जाने के लिए विशेषता जब event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091) में इस लिंक, onkeyup काम किया, लेकिन मैं onkeydown का इस्तेमाल किया था (ब्राउज़र निर्भर?)

तो, मूल प्रश्न से मेरे उदाहरण में:

function ignoreEnter(event) 
{ 
    if (event.keyCode == 13) { 
    return false; 
    } 
} 

// and this in the HTML 
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" onkeydown="return ignoreEnter(event);"> 

Answer 2

यह सिर्फ जवाब देने और रेकिन टिप्पणी का जवाब देने के लिए है।

1. फ़ॉर्म की ऑनसममिट विशेषता ऑनसबमिट = "वापसी झूठी;" पर सेट करें जब आप एक उदाहरण

<div class="modal hide fade" tabindex="-1"> 
<div class="modal-header"> 
     <button class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">{% trans "Create" %}</h3> 
    </div> 
    <div class="modal-body"> 
     <form method="POST" class="form-horizontal" onsubmit="return false"> 
      <input id="id_name" maxlength="250" name="name" type="text"> 
     </form> 
    </div> 
    <div class="modal-footer"> 
    <button id="save-button" class="btn">{% trans "Save" %}</button> 
    <button class="btn" aria-hidden="true">{% trans "Cancel" %}</button> 
    </div> 
</div> 

<script> 
    $('#save-button').on('click', function(){ 
     // TODO add ajax call 
    }); 
</script> 

आप एक रूप ऐसा करने के लिए देख सकते हैं प्रस्तुत के रूप में जावास्क्रिप्ट द्वारा फार्म के प्रस्तुत को नियंत्रित (https://stackoverflow.com/a/1329168/569091)

यह समाधान उपयोगी है बटन की onclick jQuery कॉल के माध्यम से है आईडी बचाओ

लेकिन तुम, टैग के रूप में कार्रवाई जोड़ना चाहते हैं तो आप शायद दूसरा समाधान

2. onkeydown सेट का उपयोग (या onkeyup?) झूठी वापस जाने के लिए विशेषता के लिए है जब event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091)

मेरी राय में, यदि आप फॉर्म को द्विपक्षीय रूप से बनाना चाहते हैं तो मुझे इस समाधान को पसंद नहीं है।

Answer 3

बस एक मारा Jimenez पोस्ट करने के लिए टिप्पणी:

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

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