Cegah pengguna mengirimkan formulir dengan menekan Enter

Saya memiliki survei di situs web, dan tampaknya ada beberapa masalah dengan pengguna yang menekan enter (saya tidak tahu mengapa) dan secara tidak sengaja mengirimkan survei (formulir) tanpa mengklik tombol kirim. Apakah ada cara untuk mencegah hal ini?

Saya menggunakan HTML, PHP 5.2.9, dan jQuery di survei.

Anda dapat menggunakan metode seperti

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

Dalam membaca komentar di posting asli, untuk membuatnya lebih bermanfaat dan memungkinkan orang untuk menekan Enterjika mereka telah menyelesaikan semua bidang:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

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

Larang masukkan kunci di mana saja

Jika Anda tidak memiliki <textarea>di formulir Anda, maka tambahkan saja yang berikut ke Anda <form>:

<form ... onkeydown="return event.key != 'Enter';">

Atau dengan jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Ini akan menyebabkan setiap tombol yang ditekan di dalam formulir akan diperiksa pada key. Jika tidak Enter, maka ia akan kembali truedan apa pun terus seperti biasa. Jika ya Enter, maka akan kembali falsedan segala sesuatu akan segera berhenti, sehingga formulir tidak akan dikirimkan.

The keydownevent lebih disukai keyupsebagai keyupterlambat untuk bentuk blok kirimkan. Secara historis ada juga keypress, tetapi ini sudah usang, seperti halnya KeyboardEvent.keyCode. Anda harus menggunakan KeyboardEvent.keyyang mengembalikan nama tombol yang ditekan. Ketika Enterdicentang, maka ini akan memeriksa 13 (normal masuk) serta 108 (numpad masuk).

Perhatikan bahwa $(window)seperti yang disarankan dalam beberapa jawaban lain, bukannya $(document)tidak bekerja untuk keydown/ keyupdi IE <= 8, jadi itu bukan pilihan yang baik jika Anda ingin mencakup pengguna yang buruk juga.

Izinkan tombol enter hanya di teks saja

Jika Anda memiliki <textarea>dalam formulir Anda (yang tentu saja harus menerima tombol Enter), kemudian tambahkan pengendali keydown ke setiap elemen input individu yang bukan a <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Untuk mengurangi boilerplate, ini lebih baik dilakukan dengan jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Jika Anda memiliki fungsi event handler lain yang dilampirkan pada elemen input tersebut, yang Anda juga ingin memohon pada tombol enter karena beberapa alasan, maka hanya mencegah perilaku default acara daripada mengembalikan false, sehingga dapat dengan benar menyebar ke penangan lain.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Izinkan tombol enter di textareas dan kirimkan tombol saja

Jika Anda ingin mengizinkan tombol enter pada tombol kirim <input|button type="submit">juga, maka Anda selalu dapat memperbaiki pemilih seperti di bawah ini.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Perhatikan bahwa input[type=text]seperti yang disarankan dalam beberapa jawaban lain tidak mencakup input non-teks HTML5 itu, jadi itu bukan pemilih yang baik.

Bagian 4.10.22.2 Pengajuan implisit dari spesifikasi W3C HTML5 mengatakan:

Sebuah formelemen tombol standar adalah yang pertama tombol submit di urutan pohon yang pemilik bentuk adalah bahwa formelemen.

Jika agen pengguna mendukung membiarkan pengguna mengirimkan formulir secara implisit (misalnya, pada beberapa platform menekan tombol "enter" saat bidang teks difokuskan secara implisit mengirimkan formulir), kemudian melakukannya untuk formulir yang tombol default-nya memiliki aktivasi yang ditentukan perilaku harus menyebabkan agen pengguna menjalankan langkah-langkah aktivasi klik sintetis pada tombol default itu .

Catatan: Konsekuensinya, jika tombol default dinonaktifkan, formulir tidak dikirim ketika mekanisme pengiriman implisit digunakan. (Tombol tidak memiliki perilaku aktivasi saat dinonaktifkan.)

Oleh karena itu, cara yang memenuhi standar untuk menonaktifkan pengiriman formulir secara implisit adalah dengan menempatkan tombol kirim yang dinonaktifkan sebagai tombol kirim pertama dalam bentuk:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

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

Salah satu fitur bagus dari pendekatan ini adalah ia berfungsi tanpa JavaScript ; apakah JavaScript diaktifkan atau tidak, browser web yang memenuhi standar diperlukan untuk mencegah pengiriman formulir secara implisit.

Saya harus menangkap ketiga acara terkait dengan menekan tombol untuk mencegah agar formulir tidak dikirim:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Anda dapat menggabungkan semua hal di atas menjadi versi ringkas yang bagus:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Jika Anda menggunakan skrip untuk melakukan pengiriman yang sebenarnya, maka Anda dapat menambahkan baris "return false" ke penangan onsubmit seperti ini:

<form onsubmit="return false;">

Kirim panggil () pada formulir dari JavaScript tidak akan memicu acara.

Menggunakan:

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

Solusi ini berfungsi pada semua formulir di situs web (juga pada formulir yang disisipkan dengan Ajax), mencegah hanya Enterdalam teks input. Tempatkan dalam fungsi siap dokumen, dan lupakan masalah ini seumur hidup.

Alih-alih mencegah pengguna menekan Enter, yang mungkin tampak tidak wajar, Anda dapat meninggalkan formulir apa adanya dan menambahkan beberapa validasi sisi klien: Ketika survei tidak selesai hasilnya tidak dikirim ke server dan pengguna mendapat pesan yang bagus dengan mengatakan apa yang harus diselesaikan untuk mengisi formulir. Jika Anda menggunakan jQuery, coba plugin Validasi:

http://docs.jquery.com/Plugins/Validation

Ini akan membutuhkan lebih banyak pekerjaan daripada menangkap Entertombol, tetapi tentunya itu akan memberikan pengalaman pengguna yang lebih kaya.

Solusi jQuery kecil sederhana yang bagus:

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

Saya belum bisa berkomentar, jadi saya akan memposting jawaban baru

Jawaban yang diterima ok-ish, tapi itu tidak berhenti mengirimkan pada numpad enter. Setidaknya dalam versi Chrome saat ini. Saya harus mengubah kondisi kode kunci ke ini, kemudian berfungsi.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Ini solusi saya untuk mencapai tujuan, bersih dan efektif.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Pendekatan yang sangat berbeda:

1. Yang pertama <button type="submit">dalam bentuk akan diaktifkan saat menekan Enter.
2. Ini benar bahkan jika tombolnya tersembunyi style="display:none;
3. Script untuk tombol itu dapat kembali false, yang membatalkan proses pengiriman.
4. Anda masih dapat meminta orang lain <button type=submit>untuk mengirimkan formulir. Cukup kembali trueuntuk mengirimkan kiriman.
5. Menekan Entersaat tombol kirim nyata difokuskan akan mengaktifkan tombol kirim nyata.
6. Menekan Enterbagian dalam <textarea>atau kontrol bentuk lainnya akan berperilaku seperti biasa.
7. Menekan kontrol formulir Enterdi dalam <input>akan memicu yang pertama <button type=submit>, yang kembali false, dan dengan demikian tidak ada yang terjadi.

Jadi:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Memberi bentuk tindakan 'javascript: void (0);' sepertinya melakukan trik

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Tidak menempatkan tombol kirim bisa dilakukan. Cukup masukkan skrip ke input (ketik = tombol) atau tambahkan eventListener jika Anda ingin mengirimkan data dalam formulir.

Lebih baik gunakan ini

<input type="button">

daripada menggunakan ini

<input type="submit">

1. Jangan gunakan type = "submit" untuk input atau tombol.
2. Gunakan type = "button" dan gunakan js [Jquery / angular / etc] untuk mengirimkan formulir ke server.

Saya perlu mencegah hanya masukan spesifik dari pengiriman, jadi saya menggunakan pemilih kelas, untuk membiarkan ini menjadi fitur "global" di mana pun saya membutuhkannya.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Dan kode jQuery ini:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Atau, jika keydown tidak cukup:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Beberapa catatan:

Memodifikasi berbagai jawaban yang baik di sini, Enterkuncinya tampaknya berfungsi untuk keydownsemua browser. Sebagai alternatif, saya memperbarui bind()keon() metode.

Saya penggemar berat pemilih kelas, menimbang semua pro dan kontra dan diskusi kinerja. Konvensi penamaan saya adalah 'idSomething' untuk menunjukkan bahwa jQuery menggunakannya sebagai id, untuk memisahkannya dari style CSS.

Anda bisa membuat metode JavaScript untuk memeriksa untuk melihat apakah Enterkunci itu dipukul, dan jika ya, untuk menghentikan pengiriman.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Sebut saja pada metode kirim.

HANYA MENGIRIM KIRIM tetapi tidak lain, fungsi penting dari tombol enter, seperti membuat paragraf baru di <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Ini adalah cara yang sempurna, Anda tidak akan diarahkan dari halaman Anda

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Saya punya masalah serupa, di mana saya punya kotak dengan "ajax textfields" (Yii CGridView) dan hanya satu tombol kirim. Setiap kali saya melakukan pencarian di bidang teks dan tekan enter formulir yang dikirimkan. Saya harus melakukan sesuatu dengan tombol karena itu adalah satu-satunya tombol yang umum di antara tampilan (pola MVC). Yang harus saya lakukan adalah menghapus type="submit"dan meletakkanonclick="document.forms[0].submit()

Saya pikir itu tercakup dengan baik dengan semua jawaban, tetapi jika Anda menggunakan tombol dengan beberapa kode validasi JavaScript, Anda bisa mengatur onkeypress form untuk Enter untuk memanggil pengiriman Anda seperti yang diharapkan:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

JS onkeypress bisa berupa apa saja yang perlu Anda lakukan. Tidak perlu untuk perubahan global yang lebih besar. Ini terutama benar jika Anda bukan orang yang mengkode aplikasi dari awal, dan Anda telah memperbaiki situs web orang lain tanpa merobeknya dan mengujinya kembali.

Ada banyak jawaban bagus di sini, saya hanya ingin berkontribusi sesuatu dari perspektif UX. Kontrol keyboard dalam bentuk sangat penting.

Pertanyaannya adalah bagaimana cara menonaktifkan dari pengiriman saat tombol ditekan Enter . Tidak bagaimana mengabaikan Enterdi seluruh aplikasi. Jadi pertimbangkan melampirkan pawang ke elemen bentuk, bukan jendela.

Menonaktifkan Enterpengiriman formulir harus tetap memungkinkan hal berikut:

1. Pengajuan formulir melalui Enter saat tombol kirim terfokus.
2. Pengajuan formulir saat semua bidang diisi.
3. Interaksi dengan tombol non-kirim via Enter.

Ini hanya boilerplate tetapi mengikuti ketiga kondisi.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Sesuatu yang belum saya lihat dijawab di sini: ketika Anda menabrak elemen-elemen pada halaman, menekan Enterketika Anda sampai ke tombol kirim akan memicu pengendali onsubmit pada formulir, tetapi itu akan merekam acara tersebut sebagai MouseEvent. Inilah solusi singkat saya untuk mencakup sebagian besar pangkalan:

Ini bukan jawaban terkait jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Untuk menemukan contoh yang berfungsi: https://jsfiddle.net/nemesarial/6rhogva2/

Dalam kasus khusus saya, saya harus berhenti ENTER mengirimkan formulir dan juga mensimulasikan mengklik tombol kirim. Ini karena tombol kirim memiliki klik penangan di atasnya karena kami berada dalam jendela modal (kode lama yang diwarisi). Bagaimanapun, inilah solusi kombo saya untuk kasus ini.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Kasus penggunaan ini secara khusus berguna untuk orang yang bekerja dengan IE8.

Ini bekerja untuk saya

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Saya ingin menambahkan sedikit kode CoffeeScript (tidak diuji lapangan):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Saya harap Anda menyukai trik yang bagus dalam klausa kecuali.)

Menggunakan Javascript (tanpa memeriksa bidang input apa pun):

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

Jika seseorang ingin menerapkan ini pada bidang tertentu, misalnya teks jenis input:

<script>
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 bekerja dengan baik dalam kasus saya.

Pergilah ke css Anda dan tambahkan itu ke sana maka secara otomatis akan memblokir pengiriman formular Anda selama Anda telah mengirimkan input jika Anda tidak lagi menginginkannya, Anda dapat menghapusnya atau mengetik activatedan deactivatesebagai gantinya

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Anda juga dapat menggunakan javascript:void(0)untuk mencegah pengiriman formulir.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Ini telah bekerja untuk saya di semua browser setelah banyak frustrasi dengan solusi lain. Fungsi luar name_space hanya untuk menjauh dari menyatakan global, sesuatu yang juga saya rekomendasikan.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Penggunaan sampel:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Menggunakan:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>