एंटर/रिटर्न कुंजी रोकें एक फॉर्म सबमिट करना

Question

मेरे पास एक फॉर्म के भीतर एक टेबल है। तालिका में कुछ फॉर्म फ़ील्ड हैं, लेकिन तालिका के बाहर फॉर्म फ़ील्ड हैं (लेकिन अभी भी फॉर्म के भीतर)।

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

मेरे पास एक jQuery प्लगइन है जो इस तालिका को लक्षित करता है। सरलीकृत, यह क्या मैं इतनी दूर की कोशिश की है है:

base.on('keydown', function(e) { 
    if (e.keyCode == 13) { 
     e.stopPropagation(); 
     return false; 
    } 
}); 

कहाँ base तालिका jQuery वस्तु है। यह मेरी प्लगइन की init विधि के भीतर है। हालांकि, एंटर मारना अभी भी फॉर्म सबमिट करता है।

मैं गलत कहां जा रहा हूं?

संपादित करें: कुछ सरल HTML:

<form method="" action=""> 
    <input type="text" /><!--this should still submit on Enter--> 
    <table> 
    <tbody> 
     <tr> 
     <td> 
      <input type="text" /><!--this should NOT submit on Enter--> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</form> 

Answer 1

base.keypress(function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) 
     return false; 
}); 

या के लिए केवल आदानों करता है:

$(':input', base).keypress(function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) 
     return false; 
}); 

Answer 2

e.preventDefault() बजाय e.stopPropagation()। स्टॉपप्रॉपैगेशन केवल इसे उच्च डोम नोड्स तक बुलबुला करता है, यह डिफ़ॉल्ट कार्रवाई को रोकता नहीं है।

Answer 3

मुझे लगता है कि करने के लिए है कि एक ऐसा फ़ॉर्म तत्व प्रस्तुत ईवेंट सक्रिय करेगा जा रहा हूँ, यह नहीं बबल सामने मेज के माध्यम से करता है और फार्म के लिए पर, इस instread कोशिश:

$('input, select, textarea', base).on('keydown', function(e) { 
    if (e.keyCode == 13) { 
     return false; 
    } 
}); 

नोट हम कर रहे हैं चयनकर्ता को भी संदर्भ प्रदान करना, इसलिए यह keyDown केवल आपकी तालिका के भीतर तत्वों (आवश्यकतानुसार संशोधित) पर होगा।

गोर्डन के रूप में एक और टिप्पणी में कहा, वापसी झूठी दोनों .preventDefault() और .stopPropagation()

Answer 4

मैंने पाया इस क्यू/A इसी तरह की स्थिति को हल करने की कोशिश कर रहा जहां मेरे पास कई रूप हैं और दर्ज करें जो मैं चाहता था वह नहीं करेगा। मेरे विशिष्ट मामले में, मैं गतिशील रूप से एक नया <div id="D1"> डी 1, डी 2, डी 3, आदि जोड़ता हूं, और प्रत्येक नए div में एक ऐसा फॉर्म होता है जो उस div को उसी PHP कोड से पुनः लोड करेगा जो इसे बनाया गया है, केवल एक पोस्ट के साथ भी।

असंबंधित पहली समस्या मैं गतिशील रूप से प्रत्येक div के साथ एक नया समारोह का निर्माण नहीं कर सकता था, इसलिए मैं जावास्क्रिप्ट कार्य करने के लिए एक तर्क के रूप डी 1, आदि, वर्णनकर्ता पारित कर दिया:

<script type="text/javascript"> 
function formSubmit (divid) { 
    // post data 
    event.preventDefault(); 
    $.post("make-my-form-div.php", 
      $("#form"+divid).serialize(), 
      function(data){ 
       $("#"+divid).html(data); 
      }); 
    return false; 
} 
</script> 

आप अपेक्षित देखेंगे event.preventDefault(); और return false; जो इस धागे में उत्तरों के लिए काम करता है। यह मेरे लिए काम नहीं किया। अगर मैं किसी भी रूप में सबमिट पर क्लिक करता हूं, तो एक div सही डेटा के साथ पुनः लोड होगा। एंटर मारना डिफ़ॉल्ट कार्रवाई का कारण बनता है और पूरे पृष्ठ को पुनः लोड करता है, जिससे मुझे केवल 1 div के साथ छोड़ दिया जाता है।

This Answer worked: मुझे विभिन्न रूपों के लिए एक अद्वितीय आईडी और NAME की आवश्यकता थी। प्रारंभ में, वे <INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');"> थे, लेकिन एक बार जब मैंने अद्वितीय आईडी और NAMES जैसे "formD1" इत्यादि जोड़े, तो यह सब ठीक से काम करना शुरू कर दिया।

Answer 5

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

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; }); 

Answer 6

बस अपनी टेम्पलेट फ़ाइल में या पृष्ठ के शीर्षलेख में कोड नीचे डालें।

<script type="text/javascript"> 

function stopRKey(evt) { 
    var evt = (evt) ? evt : ((event) ? event : null); 
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
    if ((evt.keyCode == 13) && (node.type=="text")) {return false;} 
} 

document.onkeypress = stopRKey; 

</script>