จะป้องกันการกดปุ่ม ENTER เพื่อส่งแบบฟอร์มบนเว็บได้อย่างไร

คุณจะป้องกันการENTERกดปุ่มจากการส่งแบบฟอร์มในแอปพลิเคชันบนเว็บได้อย่างไร

[ การแก้ไขปี 2012 ไม่มีตัวจัดการแบบอินไลน์รักษา textarea เข้าสู่การจัดการ]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

ตอนนี้คุณสามารถกำหนดตัวจัดการปุ่มกดบนแบบฟอร์ม:
<form [... ] onkeypress = "return checkEnter (event)">

document.querySelector('form').onkeypress = checkEnter;

นี่คือตัวจัดการ jQuery ที่สามารถใช้เพื่อหยุดป้อนการส่งและยังหยุดปุ่ม backspace -> back การจับคู่ (keyCode: selectorString) ในวัตถุ "keyStop" ถูกใช้เพื่อจับคู่โหนดที่ไม่ควรเริ่มการทำงานเริ่มต้น

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

นี่คือรหัสขึ้นอยู่กับคุณที่จะคิดเกี่ยวกับการช่วยการเข้าถึงและทำไมคุณถึงต้องการทำเช่นนี้!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

เพียงแค่คืนค่าเท็จจากตัวจัดการ onsubmit

<form onsubmit="return false;">

หรือถ้าคุณต้องการจัดการกลาง

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

คุณจะต้องเรียกใช้ฟังก์ชั่นนี้ซึ่งเพียงแค่จะยกเลิกพฤติกรรมการส่งเริ่มต้นของแบบฟอร์ม คุณสามารถแนบเข้ากับช่องหรือเหตุการณ์ใดก็ได้

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

ปุ่ม ENTER เพียงเปิดใช้งานปุ่มส่งเริ่มต้นของแบบฟอร์มซึ่งจะเป็นปุ่มแรก

<input type="submit" />

เบราว์เซอร์พบภายในแบบฟอร์ม

ดังนั้นจึงไม่มีปุ่มส่ง แต่มีบางอย่างที่เหมือนกัน

<input type="button" value="Submit" onclick="submitform()" /> 

แก้ไข : เพื่อตอบสนองต่อการอภิปรายในความคิดเห็น:

วิธีนี้ใช้ไม่ได้หากคุณมีช่องข้อความเพียงช่องเดียว - แต่นั่นอาจเป็นพฤติกรรมที่ต้องการในกรณีนั้น

ปัญหาอื่น ๆ คือสิ่งนี้อาศัย Javascript ในการส่งแบบฟอร์ม นี่อาจเป็นปัญหาจากมุมมองการช่วยสำหรับการเข้าถึง นี้สามารถแก้ไขได้โดยการเขียน<input type='button'/>ด้วย JavaScript และจากนั้นใส่<input type='submit' />ภายใน<noscript>แท็ก ข้อเสียของวิธีนี้คือสำหรับเบราว์เซอร์ที่ปิดใช้งานจาวาสคริปต์คุณจะมีการส่งแบบฟอร์มใน ENTER มันขึ้นอยู่กับ OP เพื่อตัดสินใจว่าพฤติกรรมที่ต้องการในกรณีนี้คืออะไร

ฉันรู้ว่าไม่มีวิธีการทำเช่นนี้โดยไม่เรียกใช้จาวาสคริปต์เลย

คำตอบสั้น ๆ ใน 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" สำหรับการป้อนข้อมูล type = 'text' ผู้เข้าชมยังคงสามารถใช้คีย์ "Enter" ทั่วทั้งเว็บไซต์

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

ดูคำตอบโดยละเอียดของฉันสำหรับคำถามที่คล้ายกันที่นี่

คำตอบทั้งหมดที่ฉันพบในหัวข้อนี้ที่นี่หรือในโพสต์อื่น ๆ มีข้อเสียเปรียบหนึ่งข้อและนั่นคือการป้องกันทริกเกอร์การเปลี่ยนแปลงจริงในองค์ประกอบของฟอร์มเช่นกัน ดังนั้นหากคุณเรียกใช้เหตุการณ์ onchange โซลูชันเหล่านี้จะไม่เปิดขึ้นเช่นกัน เพื่อแก้ไขปัญหานี้ฉันแก้ไขโค้ดเหล่านี้และพัฒนาโค้ดต่อไปนี้เพื่อตัวเอง ฉันหวังว่านี่จะเป็นประโยชน์สำหรับผู้อื่น ฉันให้คลาสในฟอร์มของฉัน "prevent_auto_submit" และเพิ่ม JavaScript ต่อไปนี้:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

ฉันเคยทำมันด้วยปุ่มกดแบบตัวจัดการเหมือนดังที่ได้กล่าวมาแล้วในอดีต ปุ่ม Enter เป็นเพียงการกระตุ้นปุ่มแรกที่ไม่ได้ปิดการใช้งานบนแบบฟอร์มดังนั้นที่จริงแล้วสิ่งที่จำเป็นต้องมีก็คือการสกัดกั้นปุ่มที่พยายามส่ง:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

แค่นั้นแหละ. การกดคีย์จะได้รับการจัดการตามปกติโดยเบราว์เซอร์ / ฟิลด์ / ฯลฯ หากมีการเรียกใช้ตรรกะการป้อน - ส่งจากนั้นเบราว์เซอร์จะพบว่าปุ่มส่งที่ซ่อนอยู่และเรียกมัน และตัวจัดการ javascript จะป้องกันการส่ง

ฉันใช้เวลาทำเบราว์เซอร์นี้เป็น IE8,9,10, Opera 9+, Firefox 23, Safari (PC) และ Safari (MAC)

ตัวอย่าง JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

รหัสฐาน - เรียกใช้ฟังก์ชั่นนี้ผ่าน "onkeypress" ที่แนบมากับแบบฟอร์มของคุณและส่ง "window.event" ลงไป

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

จากนั้นในแบบฟอร์มของคุณ:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

แม้ว่ามันจะดีกว่าถ้าคุณไม่ได้ใช้ JavaScript ที่สร้างความรำคาญ

ในกรณีของฉัน jQuery JavaScript นี้แก้ไขปัญหาได้

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

การป้องกัน "ENTER" เพื่อส่งแบบฟอร์มอาจทำให้ผู้ใช้ของคุณไม่สะดวก ดังนั้นจะดีกว่าถ้าคุณทำตามขั้นตอนด้านล่าง:

เขียนเหตุการณ์ 'onSubmit' ในแท็กแบบฟอร์มของคุณ:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

เขียนฟังก์ชัน Javascript ดังต่อไปนี้:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

หากคุณต้องการป้องกันการส่งแบบฟอร์มเมื่อกดปุ่ม Enter คุณสามารถเขียนฟังก์ชันต่อไปนี้ใน javascript:

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

ขอบคุณ

เพิ่มแท็กนี้ในแบบฟอร์มของคุณ - onsubmit="return false;" จากนั้นคุณสามารถส่งแบบฟอร์มของคุณได้ด้วยฟังก์ชั่น JavaScript เท่านั้น

เพื่อป้องกันการส่งแบบฟอร์มเมื่อกดenterในtextareaหรือinputฟิลด์ให้ตรวจสอบเหตุการณ์ส่งเพื่อค้นหาประเภทขององค์ประกอบที่ส่งเหตุการณ์

ตัวอย่างที่ 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

ทางออกที่ดีกว่าคือถ้าคุณไม่มีปุ่มส่งและคุณเริ่มต้นเหตุการณ์ด้วยปุ่มปกติ มันจะดีกว่าเพราะในตัวอย่างแรกที่ 2 ส่งเหตุการณ์ถูกไล่ออก แต่ในตัวอย่างที่สองมีเพียง 1 เหตุการณ์เท่านั้นที่ถูกไล่ออก

ตัวอย่างที่ 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

คุณจะพบสิ่งนี้ง่ายขึ้นและมีประโยชน์มากขึ้น: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

เกี่ยวกับ:

<asp:Button ID="button" UseSubmitBehavior="false"/>

โปรดตรวจสอบบทความนี้จะป้องกันการกดปุ่ม ENTER เพื่อส่งแบบฟอร์มบนเว็บได้อย่างไร

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

คุณสามารถดักจับ keydown บนฟอร์มใน javascript และป้องกันไม่ให้เกิดฟอง โดยทั่วไปแล้วบนหน้าเว็บจะส่งแบบฟอร์มที่วางไว้ในปัจจุบัน

ลิงก์นี้มอบโซลูชันที่ใช้งานได้สำหรับฉันใน Chrome, FF และ IE9 รวมถึงโปรแกรมจำลองสำหรับ IE7 และ 8 ที่มาพร้อมกับเครื่องมือสำหรับนักพัฒนาของ IE9 (F12)

http://webcheatsheet.com/javascript/disable_enter_key.php

อีกวิธีหนึ่งคือการใส่ปุ่มส่งอินพุตต่อท้ายแบบฟอร์มเฉพาะเมื่อมันควรจะถูกส่งและแทนที่ด้วย div ง่ายๆในระหว่างการกรอกแบบฟอร์ม

เพียงเพิ่มแอททริบิวนี้ลงในแท็ก FORM ของคุณ:

onsubmit="return gbCanSubmit;"

จากนั้นในแท็ก SCRIPT ของคุณเพิ่มสิ่งนี้:

var gbCanSubmit = false;

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

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

ฉันเจอสิ่งนี้ด้วยตัวเองเพราะฉันมีปุ่มส่งหลายปุ่มที่มีค่า 'ชื่อ' ที่แตกต่างกันดังนั้นเมื่อส่งพวกเขาจะทำสิ่งต่าง ๆ ในไฟล์ php เดียวกัน enter/ returnปุ่มพักนี้เป็นค่าเหล่านี้จะไม่ส่ง ดังนั้นฉันจึงคิดว่าปุ่มenter/ returnเปิดใช้งานปุ่มส่งครั้งแรกในแบบฟอร์มหรือไม่ ด้วยวิธีนี้คุณสามารถมีปุ่มส่ง 'vanilla' ที่ซ่อนอยู่หรือมีค่า 'ชื่อ' ที่ส่งคืนไฟล์ php ที่กำลังเรียกใช้งานกลับไปที่หน้าเว็บพร้อมกับแบบฟอร์มในนั้น หรือมิฉะนั้นค่าเริ่มต้น (ซ่อนอยู่) 'ชื่อ' ค่าที่กดปุ่มเปิดใช้งานและปุ่มส่งจะเขียนทับด้วยค่า 'ชื่อ' ของตัวเอง แค่ความคิด

เกี่ยวกับ:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

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

สิ่งนี้ใช้ได้สำหรับฉัน
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

นี่คือวิธีที่ฉันจะทำ:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

ใส่ลงในไฟล์ภายนอกจาวาสคริปต์

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

หรือบางส่วนภายในแท็กเนื้อหา

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

ฉันมีปัญหาเดียวกัน (แบบฟอร์มที่มีช่องข้อความจำนวนมากและผู้ใช้ที่ไม่มีทักษะ)

ฉันแก้ไขมันด้วยวิธีนี้:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

ใช้สิ่งนี้ในรหัส HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

ด้วยวิธีนี้ENTERคีย์จะทำงานได้ตามแผนที่วางไว้ แต่จำเป็นต้องมีการยืนยัน ( ENTERแตะครั้งที่สองโดยปกติ)

ฉันออกไปหาผู้อ่านเพื่อหาสคริปต์ที่ส่งผู้ใช้ในสาขาที่เขากดENTERถ้าเขาตัดสินใจที่จะอยู่ในแบบฟอร์ม