ฉันมีจาวาสคริปต์ต่อไปนี้ในหน้าของฉันซึ่งดูเหมือนจะไม่ทำงาน

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

ฉันต้องการปิดการใช้งานการส่งแบบฟอร์มเมื่อป้อนหรือดีกว่าเพื่อโทรหาแบบฟอร์ม ajax ของฉัน วิธีการแก้ปัญหาอย่างใดอย่างหนึ่งเป็นที่ยอมรับ แต่รหัสฉันรวมถึงข้างต้นไม่ได้ป้องกันแบบฟอร์มการส่ง

หากkeyCodeไม่ถูกจับให้จับwhich:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

แก้ไข: พลาดมันจะดีกว่าที่จะใช้keyupแทนkeypress

แก้ไข 2: ใน Firefox รุ่นใหม่บางรุ่นการส่งแบบฟอร์มจะไม่ได้รับการป้องกันจึงปลอดภัยกว่าที่จะเพิ่มเหตุการณ์ keypress ให้กับแบบฟอร์มเช่นกัน นอกจากนี้ยังใช้งานไม่ได้อีกต่อไปหรือไม่โดยเพียงผูกเหตุการณ์กับฟอร์ม "ชื่อ" แต่เฉพาะกับ id ของฟอร์ม ดังนั้นฉันทำให้สิ่งนี้ชัดเจนยิ่งขึ้นโดยการเปลี่ยนตัวอย่างโค้ดอย่างเหมาะสม

แก้ไข 3: เปลี่ยนbind()เป็นon()

โดยปกติจะมีการส่งแบบฟอร์มEnterเมื่อคุณมุ่งเน้นไปที่องค์ประกอบการป้อนข้อมูล

เราสามารถปิดการใช้งานEnterรหัส (รหัส13) ในองค์ประกอบการป้อนข้อมูลภายในแบบฟอร์ม:

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

DEMO: http://jsfiddle.net/bnx96/325/

สั้นกว่า:

$('myform').submit(function() {
  return false;
});

$('form').keyup(function(e) {
  return e.which !== 13  
});

event.whichคุณสมบัติ normalizes event.keyCode และ event.charCode ขอแนะนำให้ดูเหตุการณ์ซึ่งสำหรับการป้อนคีย์แป้นพิมพ์

which เอกสาร

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

โซลูชันนี้ใช้ได้กับทุกรูปแบบบนเว็บไซต์ (รวมถึงแบบฟอร์มที่แทรกด้วย ajax) เพื่อป้องกันเฉพาะป้อนข้อความ วางไว้ในฟังก์ชั่นพร้อมเอกสารและลืมปัญหานี้ไปตลอดชีวิต

คำตอบส่วนใหญ่ด้านบนจะป้องกันผู้ใช้จากการเพิ่มบรรทัดใหม่ในฟิลด์ textarea หากนี่คือสิ่งที่คุณต้องการหลีกเลี่ยงคุณสามารถยกเว้นกรณีนี้โดยการตรวจสอบว่าองค์ประกอบใดมีโฟกัสในปัจจุบัน:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

overkill ของการจับภาพและทดสอบการกดแป้นทุกครั้งสำหรับคีย์ ENTER ทำให้ฉันเป็นโรคจิตจริง ๆ ดังนั้นโซลูชันของฉันขึ้นอยู่กับพฤติกรรมของเบราว์เซอร์ต่อไปนี้:

การกด ENTER จะทำให้เกิดเหตุการณ์คลิกบนปุ่มส่ง (ทดสอบใน IE11, Chrome 38, FF 31) ** (อ้างอิง: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

ดังนั้นทางออกของฉันคือการลบปุ่มส่งมาตรฐาน (เช่น<input type="submit">) เพื่อให้พฤติกรรมข้างต้นล้มเหลวเพราะไม่มีปุ่มส่งให้คลิกอย่างน่าอัศจรรย์เมื่อกด ENTER แต่ฉันใช้ตัวจัดการการคลิก jQuery บนปุ่มปกติเพื่อส่งแบบฟอร์มผ่าน.submit()วิธีการของ jQuery

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

การสาธิต: http://codepen.io/anon/pen/fxeyv?editors=101

** ลักษณะการทำงานนี้ไม่สามารถใช้งานได้ถ้าแบบฟอร์มมีเพียง 1 ช่องป้อนข้อมูลและฟิลด์นั้นเป็นอินพุต 'ข้อความ' ในกรณีนี้จะมีการส่งแบบฟอร์มเมื่อกดปุ่ม ENTER แม้ว่าจะไม่มีปุ่มส่งอยู่ใน HTML markup (เช่นช่องค้นหา) นี่เป็นพฤติกรรมของเบราว์เซอร์มาตรฐานมาตั้งแต่ยุค 90

หากคุณเพียงต้องการปิดการใช้งานปุ่มส่งและส่งก็ใช้กิจกรรม onsubmit ของฟอร์มด้วย

<form onsubmit="return false;">

คุณสามารถแทนที่ "return false" ด้วยการเรียกใช้ฟังก์ชัน JS ที่จะทำสิ่งที่จำเป็นและยังส่งแบบฟอร์มเป็นขั้นตอนสุดท้าย

คุณสามารถทำสิ่งนี้ได้อย่างสมบูรณ์ใน Javascript ล้วนๆเรียบง่ายและไม่ต้องใช้ห้องสมุด นี่คือคำตอบโดยละเอียดของฉันสำหรับหัวข้อที่คล้ายกัน: การปิดใช้งานการป้อนคีย์สำหรับแบบฟอร์ม

กล่าวโดยย่อนี่คือรหัส:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

รหัสนี้ใช้เพื่อป้องกันคีย์ "Enter" สำหรับ input type = 'text' เท่านั้น (เนื่องจากผู้เข้าชมอาจต้องกด Enter ข้ามหน้า) หากคุณต้องการปิดการใช้งาน "Enter" สำหรับการกระทำอื่นเช่นกันคุณสามารถเพิ่ม console.log (e); สำหรับจุดประสงค์ในการทดสอบของคุณและกด F12 ในโครเมี่ยมไปที่แท็บ "คอนโซล" และกด "backspace" บนหน้าเว็บและดูข้างในเพื่อดูว่ามีการคืนค่าใดบ้างจากนั้นคุณสามารถกำหนดเป้าหมายพารามิเตอร์เหล่านั้นทั้งหมด ด้านบนเพื่อให้เหมาะกับความต้องการของคุณสำหรับ"e.target.nodeName" , "e.target.type"และอีกมากมาย ...

ฉันไม่ทราบว่าคุณแก้ไขปัญหานี้ได้แล้วหรือใครก็ตามที่พยายามแก้ไขปัญหานี้ในตอนนี้ แต่นี่คือวิธีแก้ปัญหาของฉัน!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});

วิธีง่ายๆคือการเปลี่ยนประเภทของปุ่มเป็นปุ่ม - ใน html แล้วเพิ่มเหตุการณ์ใน js ...

เปลี่ยนจากสิ่งนี้:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

ถึง

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

และใน js หรือ jquery เพิ่ม:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});

รหัสต่อไปนี้จะทำให้คีย์ป้อนไม่ถูกใช้เพื่อส่งแบบฟอร์ม แต่จะอนุญาตให้คุณใช้ปุ่ม Enter ใน textarea คุณสามารถแก้ไขเพิ่มเติมได้ตามความต้องการของคุณ

<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") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

ใน Firefox เมื่อคุณป้อนข้อมูลและกด Enter มันจะส่งแบบฟอร์มด้านบน การแก้ปัญหาอยู่ในแบบฟอร์มจะส่งเพิ่มสิ่งนี้:

<input type="submit" onclick="return false;" style="display:none" />

3 ปีต่อมาและไม่ใช่คนเดียวที่ตอบคำถามนี้อย่างสมบูรณ์

ผู้ถามต้องการยกเลิกการส่งแบบฟอร์มเริ่มต้นและโทรหา Ajax ของตนเอง นี่เป็นคำขอที่เรียบง่ายพร้อมโซลูชันที่เรียบง่าย ไม่จำเป็นต้องดักจับอักขระทุกตัวที่ป้อนเข้าไปในแต่ละอินพุต

สมมติว่าแบบฟอร์มมีปุ่มส่งไม่ว่าจะทำ<button id="save-form">หรือ<input id="save-form" type="submit">ทำ:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});

ฉันwhichไม่ได้ยินคำแนะนำดังนั้นเปลี่ยนคำตอบที่ได้คะแนนสูงสุดสำหรับเรื่องนี้

$('#formid').on('keyup keypress', function(e) {
  if (e.key === 'Enter') { 
    e.preventDefault();
    return false;
  }
});

อ้าง https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

เมื่อไฟล์เสร็จสิ้น (โหลดเสร็จสมบูรณ์) สคริปต์จะตรวจสอบแต่ละเหตุการณ์สำหรับคีย์ "รายการ" และเขาปิดใช้งานเหตุการณ์ที่อยู่ด้านหลัง

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

โซลูชันที่สมบูรณ์ใน JavaScript สำหรับเบราว์เซอร์ทั้งหมด

รหัสด้านบนและโซลูชันส่วนใหญ่สมบูรณ์แบบ อย่างไรก็ตามฉันคิดว่าคำตอบสั้น ๆ ที่ชอบมากที่สุดซึ่งไม่สมบูรณ์

นี่คือคำตอบทั้งหมด ในจาวาสคริปต์ด้วยการสนับสนุนดั้งเดิมสำหรับ IE 7 เช่นกัน

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

โซลูชันนี้จะป้องกันผู้ใช้จากการส่งโดยใช้รหัสป้อนและจะไม่โหลดหน้าเว็บหรือนำคุณไปที่ด้านบนของหน้าหากแบบฟอร์มของคุณอยู่ด้านล่าง

เกี่ยวกับสิ่งนี้:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

สิ่งนี้ควรปิดใช้งานทุกรูปแบบด้วยปุ่มส่งในแอปของคุณ