jquery nonaktifkan formulir kirim saat masuk


207

Saya memiliki javascript berikut di halaman saya yang sepertinya tidak berfungsi.

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

Saya ingin menonaktifkan pengiriman formulir saat masuk, atau lebih baik lagi, untuk memanggil formulir ajax saya. Salah satu solusi dapat diterima tetapi kode saya termasuk di atas tidak mencegah formulir mengirimkan.


3
Berikut ini adalah satu-satunya solusi HTML sederhana: stackoverflow.com/a/51507806/337934
SamB

Jawaban:


420

Jika keyCodetidak tertangkap, tangkap which:

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

EDIT: ketinggalan, lebih baik digunakan keyupdaripadakeypress

EDIT 2: Seperti di beberapa versi Firefox yang lebih baru pengiriman formulir tidak dicegah, lebih aman untuk menambahkan acara penekanan tombol ke formulir juga. Juga tidak berfungsi (lagi?) Dengan hanya mengikat acara ke bentuk "nama" tetapi hanya ke id formulir. Karena itu saya membuatnya lebih jelas dengan mengubah contoh kode dengan tepat.

EDIT 3: Diubah bind()menjadion()


15
jQuery menormalkannya e.which, jadi Anda tidak perlu mengujinya e.keyCode, tetapi memberi +1 untuk kemungkinan penyebab masalah ini.
Bojangles

4
Apakah Anda memerlukan return false;ini? e.preventDefault();tampaknya luar biasa
chromigo

10
Penting! Blok solusi ini rusak dalam textarea.
German Khokhlov

4
Masalahnya adalah jika saya memiliki dalam bentuk yang sama kotak teks, sekarang saya tidak dapat menambahkan enter (untuk membuat baris baru) di kotak teks.
Tikky

3
keyCode === 13 && !$(e.target).is('textarea')
teran

62

Biasanya formulir dikirimkan Enterketika Anda memiliki fokus pada elemen input.

Kami dapat menonaktifkan Enterkunci (kode 13) pada elemen input dalam formulir:

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

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


Tombol iOS Go adalah masalah saya pada bidang input autocomplete khusus. Ini menyelesaikannya.
Dylan Valade

11
Ini mencegah agar tombol enter tidak digunakan textareasdalam bentuk yang sama. Menggunakan $("form input")alih-alih $("form :input")tampaknya untuk memperbaikinya. DEMO: jsfiddle.net/bnx96/279
shaneparsons

43

Bahkan lebih pendek:

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

35
Tapi ini akan mencegah klik pengguna juga?
haibuihoang

5
@haibuihoang Ya ini akan menonaktifkan pengiriman formulir.
Tom

7
Anda harus menggunakan function(e) {e.preventDefault();}karena nilai pengembalian di penangan acara tidak digunakan lagi: stackoverflow.com/a/20045473/601386
flu

6
@ user1111929 Ini berfungsi dengan baik tetapi seharusnya tidak menjadi jawaban teratas karena pertanyaan hanya bertanya tentang Enterdan bukan tentang menonaktifkan pengiriman formulir dengan Submittombol.
daveslab

Situasi umum di mana Anda mungkin ingin menyimpan pengiriman formulir, tetapi menonaktifkan pengiriman saat menekan tombol 'enter', adalah jika Anda memutuskan untuk menggunakan onClickacara jQuery untuk memvalidasi formulir, dan masih mengirimkan menggunakan jQuery. Dengan kata lain, ada beberapa kasus di mana Anda hanya ingin mengirim melalui javascript / jQuery. Meskipun Anda masih dapat menggunakan AJAX dengan solusi ini, ia menonaktifkan fungsionalitas dasar submitmetode ini.
JRad the Bad

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

The event.which properti menormalkan event.keyCode dan event.charCode. Dianjurkan untuk menonton acara. Yang untuk input tombol keyboard.

which docs.


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

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


9

Sebagian besar jawaban di atas akan mencegah pengguna menambahkan baris baru di bidang textarea. Jika ini adalah sesuatu yang ingin Anda hindari, Anda dapat mengecualikan kasus khusus ini dengan memeriksa elemen yang saat ini memiliki fokus:

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

8

Kerja keras karena harus menangkap dan menguji setiap keystroke untuk kunci ENTER benar-benar mengganggu saya, jadi solusi saya bergantung pada perilaku browser berikut:

Menekan ENTER akan memicu acara klik pada tombol kirim (diuji di IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

Jadi solusi saya adalah menghapus tombol submit standar (yaitu <input type="submit">) sehingga perilaku di atas gagal karena tidak ada tombol submit untuk secara ajaib klik ketika ENTER ditekan. Sebagai gantinya, saya menggunakan penangan klik jQuery pada tombol biasa untuk mengirimkan formulir melalui .submit()metode 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>

Demo: http://codepen.io/anon/pen/fxeyv?editors=101

** perilaku ini tidak berlaku jika formulir hanya memiliki 1 bidang input dan bidang itu adalah input 'teks'; dalam hal ini formulir akan dikirimkan pada tombol ENTER bahkan jika tidak ada tombol kirim hadir di markup HTML (misalnya bidang pencarian). Ini telah menjadi perilaku browser standar sejak 90-an.


Saya menambahkan kotak input yang tidak terlihat untuk melawan "formulir akan dikirimkan pada tombol ENTER" yang disebabkan oleh "formulir hanya memiliki 1 bidang input dan bidang itu adalah input 'teks'".
Luo Jiong Hui

6

jika Anda hanya ingin menonaktifkan tombol kirim saat masuk dan kirim juga gunakan acara pengiriman formulir

<form onsubmit="return false;">

Anda dapat mengganti "kembali salah" dengan fungsi panggilan ke JS yang akan melakukan apa pun yang diperlukan dan juga mengirimkan formulir sebagai langkah terakhir.


1
Ini akan menonaktifkan semua pengiriman formulir, termasuk mengklik tombol kirim.
Nick

tidak 100% ... bekerja secara teratur, kirimkan kunci ... jquery penggunaan terbaik untuk mencegah
KingRider

Jawaban alternatif yang bagus (dengan peringatan di atas) karena ... yah, terkadang hanya ini yang Anda butuhkan.
Emilys

ini persis apa yang saya butuhkan untuk suatu situasi, terima kasih
shababhsiddique

4

Anda dapat melakukan ini dengan sempurna dalam Javascript murni, sederhana dan tidak perlu pustaka. Ini dia jawaban terinci saya untuk topik serupa: Menonaktifkan tombol enter untuk formulir

Singkatnya, ini kodenya:

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

Kode ini untuk mencegah kunci "Enter" hanya untuk tipe input = 'teks'. (Karena pengunjung mungkin perlu menekan enter di seluruh halaman) Jika Anda ingin menonaktifkan "Enter" juga untuk tindakan lain, 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 ...


2
Sebenarnya seharusnya begitu e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'. Dengan kode yang ditentukan itu akan memungkinkan untuk mengirimkan formulir jika radio atau kotak centang difokuskan.
Mengembang

3

Saya tidak tahu apakah Anda sudah menyelesaikan masalah ini, atau siapa pun yang mencoba menyelesaikan ini sekarang, tetapi, inilah solusi saya untuk ini!

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

2

Cara sederhananya adalah mengubah jenis tombol ke tombol - dalam html dan kemudian menambahkan acara di js ...

Ubah dari ini:

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

Untuk

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

Dan di js atau jquery tambahkan:

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

1

Kode berikut akan meniadakan kunci enter dari yang digunakan untuk mengirimkan formulir, tetapi masih akan memungkinkan Anda untuk menggunakan kunci enter dalam textarea. Anda dapat mengeditnya lebih lanjut tergantung kebutuhan Anda.

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

1

Di firefox, ketika Anda input dan tekan enter, itu akan mengirimkan formulir atas itu. Solusinya ada di form kirim akan tambahkan ini:

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

1

3 tahun kemudian dan tidak ada satu orang pun yang menjawab pertanyaan ini sepenuhnya.

Penanya ingin membatalkan pengiriman formulir default dan memanggil Ajax mereka sendiri. Ini adalah permintaan sederhana dengan solusi sederhana. Tidak perlu mencegat setiap karakter yang dimasukkan ke dalam setiap input.

Dengan asumsi formulir memiliki tombol kirim, apakah a <button id="save-form">atau a <input id="save-form" type="submit">, lakukan:

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


-2

Ketika file selesai (memuat selesai), skrip mendeteksi setiap peristiwa untuk kunci "Entri" dan ia menonaktifkan acara di belakang.

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

tambahkan beberapa penjelasan
HaveNoDisplayName

@HaveNoDisplayName: Diperbarui.
McNavy

-4

Solusi Lengkap dalam JavaScript untuk semua browser

Kode di atas dan sebagian besar solusinya sempurna. Namun, saya pikir yang paling disukai adalah "jawaban singkat" yang tidak lengkap.

Jadi, inilah jawaban keseluruhannya. dalam JavaScript dengan Dukungan asli untuk IE 7 juga.

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

Solusi ini sekarang akan mencegah pengguna dari mengirimkan menggunakan tombol enter dan tidak akan memuat ulang halaman, atau membawa Anda ke bagian atas halaman, jika formulir Anda berada di suatu tempat di bawah ini.


8
Ini juga mencegah formulir dari pengiriman jika Anda mengklik tombol "Kirim".
Mario Werner

-10

Bagaimana dengan ini:

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

Ini harus menonaktifkan semua formulir dengan mengirimkan tombol di aplikasi Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.