Bagaimana mencegah penekanan tombol ENTER untuk mengirimkan formulir web?

Bagaimana Anda mencegah ENTERpers kunci mengirim formulir dalam aplikasi berbasis web?

[ revisi 2012, tidak ada inline handler, pertahankan textarea enter handling]

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;
}

Sekarang Anda dapat mendefinisikan penekan tombol ditekan pada formulir:
<form [...] onkeypress = "return checkEnter (event)">

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

Berikut ini adalah penangan jQuery yang dapat digunakan untuk berhenti memasukkan submit, dan juga menghentikan backspace key -> back. Pasangan (keyCode: selectorString) di objek "keyStop" digunakan untuk mencocokkan node yang tidak boleh mengaktifkan aksi default mereka.

Ingatlah bahwa web harus menjadi tempat yang dapat diakses, dan ini melanggar harapan pengguna papan ketik. Yang mengatakan, dalam kasus saya aplikasi web yang saya kerjakan tidak suka tombol kembali, jadi menonaktifkan pintasan kuncinya adalah OK. Diskusi "harus masuk -> serahkan" itu penting, tetapi tidak terkait dengan pertanyaan aktual yang diajukan.

Ini kodenya, terserah Anda untuk memikirkan aksesibilitas dan mengapa Anda sebenarnya ingin melakukan ini!

$(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;
 });
});

Cukup kembalikan false dari penangan onsubmit

<form onsubmit="return false;">

atau jika Anda ingin pawang di tengah

<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;
    }
});

Anda harus memanggil fungsi ini yang hanya akan membatalkan perilaku pengiriman standar formulir. Anda dapat melampirkannya ke bidang input atau acara apa pun.

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();
    }
}

Tombol ENTER hanya mengaktifkan tombol kirim default formulir, yang akan menjadi yang pertama

<input type="submit" />

browser menemukan dalam formulir.

Karena itu tidak memiliki tombol kirim, tetapi sesuatu seperti

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

EDIT : Menanggapi diskusi dalam komentar:

Ini tidak berfungsi jika Anda hanya memiliki satu bidang teks - tetapi mungkin itu adalah perilaku yang diinginkan dalam kasus itu.

Masalah lainnya adalah bahwa ini bergantung pada Javascript untuk mengirimkan formulir. Ini mungkin masalah dari sudut pandang aksesibilitas. Ini dapat diatasi dengan menulis <input type='button'/>dengan javascript, dan kemudian meletakkan <input type='submit' />dalam<noscript> tag. Kelemahan dari pendekatan ini adalah bahwa untuk browser yang dinonaktifkan dengan javascript Anda akan memiliki pengiriman formulir pada ENTER. Terserah OP untuk memutuskan perilaku apa yang diinginkan dalam kasus ini.

Saya tahu tidak ada cara untuk melakukan ini tanpa menggunakan javascript sama sekali.

Singkatnya jawaban dalam Javascript murni adalah:

<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>

Ini hanya menonaktifkan aksi penekanan tombol "Enter" untuk input type = 'text'. Pengunjung masih dapat menggunakan kunci "Enter" di seluruh situs web.

Jika Anda ingin menonaktifkan "Enter" untuk tindakan lain juga, Anda dapat menambahkan console.log (e); untuk keperluan pengujian Anda, dan tekan F12 di chrome, buka tab "konsol" dan tekan "backspace" pada halaman dan lihat di dalamnya untuk melihat nilai apa yang dikembalikan, maka Anda dapat menargetkan semua parameter tersebut untuk lebih meningkatkan kode di atas sesuai dengan kebutuhan Anda untuk "e.target.nodeName" , "e.target.type" dan banyak lagi ...

Lihat jawaban terinci saya untuk pertanyaan serupa di sini

Semua jawaban yang saya temukan pada subjek ini, di sini atau di posting lain memiliki satu kelemahan dan itu mencegah pemicu perubahan aktual pada elemen formulir juga. Jadi, jika Anda menjalankan solusi ini, acara pertukaran tidak terpicu juga. Untuk mengatasi masalah ini saya memodifikasi kode-kode ini dan mengembangkan kode berikut untuk saya sendiri. Saya harap ini bermanfaat bagi orang lain. Saya memberi kelas ke formulir saya "prevent_auto_submit" dan menambahkan JavaScript berikut:

$(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");
        }
    });
});

Saya selalu melakukannya dengan penekan tombol ditekan seperti di atas di masa lalu, tetapi hari ini menemukan solusi yang lebih sederhana. Tombol enter hanya memicu tombol kirim pertama yang tidak dinonaktifkan pada formulir, jadi sebenarnya yang diperlukan hanyalah mencegat tombol yang mencoba mengirim:

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

Itu dia. Tekan tombol akan ditangani seperti biasa oleh browser / bidang / dll. Jika logika enter-submit dipicu, maka browser akan menemukan tombol kirim tersembunyi dan memicu itu. Dan penangan javascript kemudian akan mencegah pengiriman.

Saya telah menghabiskan beberapa waktu membuat peramban silang ini untuk IE8,9,10, Opera 9+, Firefox 23, Safari (PC) dan Safari (MAC)

Contoh JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Kode dasar - Panggil fungsi ini melalui "onkeypress" yang terlampir pada formulir Anda dan berikan "window.event" ke dalamnya.

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;
  }
}

Kemudian di formulir Anda:

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

Padahal, akan lebih baik jika Anda tidak menggunakan JavaScript yang mencolok.

Dalam kasus saya, JavaScript jQuery ini menyelesaikan masalah

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

Mencegah "ENTER" untuk mengirimkan formulir mungkin membuat beberapa pengguna Anda tidak nyaman. Jadi akan lebih baik jika Anda mengikuti prosedur di bawah ini:

Tulis acara 'onSubmit' di tag formulir Anda:

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

tulis fungsi Javascript sebagai berikut:

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

     } 

     (OR)

Apa pun alasannya, jika Anda ingin mencegah pengiriman formulir dengan menekan tombol Enter, Anda dapat menulis fungsi berikut dalam javascript:

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

Terima kasih.

Tambahkan tag ini ke formulir Anda - onsubmit="return false;" Maka Anda hanya dapat mengirimkan formulir Anda dengan beberapa fungsi JavaScript.

Untuk mencegah pengiriman formulir saat menekan entera textareaatauinput pengiriman bidang , periksa ajukan acara untuk menemukan jenis elemen yang mengirim acara.

Contoh 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();
    }
});

Solusi yang lebih baik adalah jika Anda tidak memiliki tombol kirim dan Anda memecat acara dengan tombol normal. Itu lebih baik karena dalam contoh pertama 2 ajukan acara dipecat, tetapi dalam contoh kedua hanya 1 ajukan acara dipecat.

Contoh 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();
    }
});

Anda akan menemukan ini lebih sederhana dan bermanfaat: 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;
    } 
});

Bagaimana tentang:

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

Silakan periksa artikel ini. Bagaimana mencegah ENTER menekan tombol untuk mengirimkan formulir web?

$(“.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>

Anda dapat menjebak keydown pada formulir di javascript dan mencegah bahkan menggelegak, saya pikir. ENTER pada halaman web pada dasarnya hanya mengirimkan formulir di mana kontrol yang dipilih saat ini ditempatkan.

Tautan ini memberikan solusi yang telah bekerja untuk saya di Chrome, FF, dan IE9 plus emulator untuk IE7 dan 8 yang dilengkapi dengan alat pengembang IE9 (F12).

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

Pendekatan lain adalah dengan menambahkan tombol input kirim ke formulir hanya ketika seharusnya diajukan dan menggantinya dengan div sederhana selama mengisi formulir

Cukup tambahkan atribut ini ke tag FORMULIR Anda:

onsubmit="return gbCanSubmit;"

Kemudian, di tag SCRIPT Anda, tambahkan ini:

var gbCanSubmit = false;

Kemudian, ketika Anda membuat tombol atau karena alasan lain (seperti dalam suatu fungsi) Anda akhirnya mengizinkan pengiriman, cukup balikkan boolean global dan lakukan panggilan .submit (), mirip dengan contoh ini:

function submitClick(){

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

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

}

Saya telah menemukan ini sendiri karena saya memiliki beberapa tombol kirim dengan nilai 'nama' yang berbeda, sehingga ketika dikirimkan mereka melakukan hal yang berbeda pada file php yang sama. The enter/ returntombol istirahat ini sebagai nilai-nilai yang tidak disampaikan. Jadi saya berpikir, apakah tombol enter/ returnmengaktifkan tombol kirim pertama dalam formulir? Dengan begitu Anda bisa memiliki tombol kirim 'vanilla' yang tersembunyi atau memiliki nilai 'nama' yang mengembalikan file php pelaksana kembali ke halaman dengan formulir di dalamnya. Atau nilai 'nama' default (tersembunyi) yang diaktifkan oleh penekanan tombol, dan tombol kirim ditimpa dengan nilai 'nama' mereka sendiri. Hanya pemikiran saja.

Bagaimana tentang:

<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>

Dan cukup beri nama tombol Anda dengan benar dan itu masih akan mengirimkan, tetapi bidang teks yaitu eksplisitOriginalTarget ketika Anda menekan kembali dalam satu, tidak akan memiliki nama yang tepat.

Ini berhasil untuk saya.
onkeydown = "return! (event.keyCode == 13)"

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

   </form>

Begini cara saya melakukannya:

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

dimasukkan ke dalam file eksternal javascript

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

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

atau di suatu tempat di dalam tag tubuh

<script>


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

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Saya memiliki masalah yang sama (formulir dengan banyak bidang teks dan pengguna tidak terampil).

Saya memecahkannya dengan cara ini:

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;
    }
}

menggunakan ini dalam kode HTML:

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

Dengan cara ini ENTERkunci berfungsi seperti yang direncanakan, tetapi konfirmasi (satu detikENTER ketukan , biasanya) diperlukan.

Saya serahkan kepada pembaca pencarian skrip yang mengirim pengguna ke bidang tempat dia menekan ENTERjika dia memutuskan untuk tetap menggunakan formulir itu.