Masukkan klik tombol pemicu

168

Saya punya halaman dengan dua tombol. Satu adalah <button>elemen dan yang lainnya adalah a <input type="submit">. Tombol muncul di halaman dalam urutan itu. Jika saya berada di bidang teks di mana saja di formulir dan tekan <Enter>, acara elemen tombol clickdipicu. Saya berasumsi itu karena elemen tombol duduk terlebih dahulu.

Saya tidak dapat menemukan apa pun yang tampak seperti cara yang dapat diandalkan untuk mengatur tombol default, saya juga tidak ingin pada saat ini. Dengan tidak adanya yang lebih baik, saya telah menangkap penekanan tombol di mana saja pada formulir dan, jika itu adalah <Enter>kunci yang ditekan, saya hanya meniadakannya:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Sejauh yang saya tahu sejauh ini, tampaknya berhasil, tetapi terasa sangat mengepal.

Adakah yang tahu teknik yang lebih canggih untuk melakukan ini?

Demikian pula, apakah ada jebakan untuk solusi ini yang tidak saya sadari?

Terima kasih.

Rob Wilkerson
sumber
1
Ini bisa terjadi ketika menggunakan bentuk reaktif sudut juga, tidak hanya berguna untuk JQuery, tetapi juga untuk pengembangan sudut.
HDJEMAI

Jawaban:

362

Menggunakan

<button type="button">Whatever</button>

harus melakukan trik.

Alasannya adalah karena tombol di dalam formulir memiliki jenisnya yang secara implisit diatur ke submit. Seperti zzzzBoz mengatakan, Spec mengatakan bahwa pertama buttonatau inputdengan type="submit"yang dipicu dalam situasi ini. Jika Anda menetapkan secara khusus type="button", maka dihapus dari pertimbangan oleh browser.

Anjing gila
sumber
1
manis, terima kasih, sepertinya tombol di IE8 untuk saya menangkap klik <enter>, type="button"sepertinya menyelesaikan ini ... Terima kasih! ps ada ide mengapa ini? ie8 memperlakukan tombol sebagai tipe kirim? Aneh.
Quang Van
3
Jawaban yang bagus, ini mengisyaratkan ke browser mana tombol yang tidak mengirimkan tombol, sehingga dapat melakukan hal yang benar tanpa mengatur ulang markup.
Don Spaulding
2
@ Leinster menjawab alasan untuk kekhasan ini - "Sebuah tombol tanpa atribut type diperlakukan sama dengan tombol dengan tipe yang diset untuk dikirimkan."
Bucket
2
Hal yang sama berlaku untuk <input type="submit"/>(akan memicu klik) dan <input type="button"/>(tidak akan memicu klik)
Marius Balčytis
1
Luar biasa!! Saya sangat bingung.
Margus Pala
54

Penting untuk membaca spesifikasi HTML untuk benar-benar memahami perilaku apa yang diharapkan:

Spesifikasi HTML5 secara eksplisit menyatakan apa yang terjadi diimplicit submissions :

Tombol default elemen form adalah tombol kirim pertama dalam urutan pohon yang pemilik formnya adalah elemen form itu.

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), maka 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.

Ini tidak dibuat eksplisit dalam spesifikasi HTML4, namun browser telah mengimplementasikan apa yang dijelaskan dalam spesifikasi HTML5 (itulah sebabnya mengapa ini dimasukkan secara eksplisit).

Edit untuk ditambahkan:

Jawaban paling sederhana yang dapat saya pikirkan adalah dengan meletakkan tombol kirim Anda sebagai [type="submit"]item pertama dalam formulir, tambahkan padding ke bagian bawah formulir dengan css, dan benar-benar posisikan tombol kirim di bagian bawah di mana Anda inginkan.

zzzzBov
sumber
Di sana saya mengutuk IE, ternyata itu markup ceroboh saya selama ini! Bersulang!
Shawson
2
Wow ... Terima kasih, tuan. Ini adalah penemuan yang tidak disengaja. Aku bahkan tidak bisa memahami mengapa acara klik sedang dipecat dari memukul tombol enter, tapi kutipan Anda membuat saya w3.org/TR/html5/forms.html#implicit-submission
chemoish
Tautan rusak. Saya pikir w3c.github.io/html/sec-forms.html#implicit-smission adalah url baru.
TJ.
22

Saya tidak berpikir Anda perlu javascript atau CSS untuk memperbaikinya.

Menurut spesifikasi html 5 untuk tombol, tombol tanpa atribut tipe diperlakukan sama dengan tombol dengan tipe yang disetel ke "kirim", yaitu sebagai tombol untuk mengirimkan formulir yang berisi. Mengatur jenis tombol ke "tombol" harus mencegah perilaku yang Anda lihat.

Saya tidak yakin tentang dukungan browser untuk ini, tetapi perilaku yang sama telah ditentukan dalam spesifikasi html 4.01 untuk tombol jadi saya berharap ini cukup bagus.

Leinster
sumber
13

Dengan menekan 'Enter' pada fokus <input type="text">Anda memicu 'klik' acara pada elemen yang diposisikan pertama: <button>atau <input type="submit">. Jika Anda menekan 'Enter' di <textarea>, Anda cukup membuat baris teks baru.

Lihat contoh di sini .

Kode Anda mencegah untuk membuat baris teks baru <textarea>, jadi Anda harus menangkap penekanan tombol hanya untuk <input type="text">.

Tetapi mengapa Anda perlu menekan Enterbidang teks? Jika Anda ingin mengirimkan formulir dengan menekan 'Enter', tetapi <button>harus tetap yang pertama di tata letak, cukup mainkan dengan markup: letakkan <input type="submit">kode sebelum <button>dan gunakan CSS untuk menyimpan tata letak yang Anda butuhkan.

Menangkap 'Enter' dan menyimpan markup:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});
Feniks502
sumber
Bukankah pernyataan if memiliki tanda kurung untuk mengeksekusi kedua pernyataan hanya ketika enter ditekan? Kalau tidak, pengiriman akan dilakukan untuk setiap penekanan tombol. Mengingatkan saya pada goto gagal. :)
danmiser
13

Di mana pun Anda menggunakan <button>elemen secara default akan mempertimbangkan tombol itu type="submit"jadi jika Anda mendefinisikan tombol type="button"maka itu tidak akan menganggap itu <button>sebagai tombol kirim.

Ram Thota
sumber
2

Menekan masukkan dalam bidang teks formulir akan, secara default, mengirimkan formulir. Jika Anda tidak ingin itu bekerja dengan cara itu Anda harus menangkap tombol enter, tekan dan konsumsi seperti yang Anda lakukan. Tidak ada jalan lain untuk ini. Ini akan bekerja dengan cara ini bahkan jika tidak ada tombol dalam formulir.

Sparafusile
sumber
4
Saya tidak berpikir masalahnya adalah bahwa formulir tunduk, itu memicu clicktindakan pada elemen tombol keinginan adalah konsekuensi yang tidak diinginkan
Martin Jespersen
Anda benar. Either way, hasilnya sama - Anda harus menangkap tombol enter untuk mencegah pengiriman formulir yang tidak diinginkan.
Sparafusile
2

Anda dapat menggunakan javascript untuk memblokir pengiriman formulir hingga waktu yang tepat. Contoh yang sangat kasar:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Menekan enter masih akan memicu formulir untuk mengirim, tetapi javascript akan mencegahnya mengirimkan, sampai Anda benar-benar menekan tombol.

Dave
sumber
2

Contoh dom

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

jika Anda tidak menggunakan preventDefault (), tombol lain akan terpicu.

Mehmet Ali Kuş
sumber
0

Saya akan melakukannya seperti berikut: Di handler untuk acara onclick tombol (tidak mengirimkan) periksa kode kunci objek acara. Jika "masuk", saya akan mengembalikan false.

Satyajit
sumber
Kode kunci itu selalu diteruskan seolah-olah itu hanya sebuah klik. Di situlah letak masalahnya. :-)
Rob Wilkerson
Maka saya kira Anda melakukannya dengan cara yang sulit - menangani acara onkeydown pada tombol juga. Pawang akan melewati keyEvent; periksa keyCode -> jika 13, preventDefault. Dengan cara ini Anda dapat benar-benar membiarkan pengguna menekan enter pada tombol itu juga tanpa efek samping dari mengeksekusi peristiwa klik.
Satyajit
0

Situasi saya memiliki dua Submittombol di dalam elemen formulir: Updatedan Delete. The Deletetombol menghapus gambar dan Updatetombol update database dengan bidang teks dalam bentuk.

Karena Deletetombol itu pertama dalam bentuk, itu adalah tombol default pada Entertombol. Bukan yang saya inginkan. Pengguna berharap dapat menekan Entersetelah mengubah beberapa bidang teks.

Saya menemukan jawaban saya untuk mengatur tombol default di sini :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Tanpa menggunakan skrip apa pun, saya mendefinisikan bentuk yang dimiliki setiap tombol dengan menggunakan <button> form="bla"atribut. Saya mengatur Deletetombol ke formulir yang tidak ada dan mengatur Updatetombol yang ingin saya picu pada Entertombol ke bentuk yang akan digunakan pengguna saat memasukkan teks.

Ini adalah satu-satunya hal yang berhasil untuk saya sejauh ini.

Dan Vachon
sumber
1
Silakan periksa bagaimana menjawabnya di stackoverflow
Morse
0

Anda dapat melakukan sesuatu seperti ini.

ikat acara Anda menjadi fungsi umum dan panggil acara tersebut baik dengan menekan tombol atau mengklik tombol.

sebagai contoh.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});
pengembang baru
sumber
-1

Saya menambahkan tombol ketik "kirim" sebagai elemen pertama dari formulir dan membuatnya tidak terlihat ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Bekerja seperti penyegaran situs, yaitu saya tidak melakukan apa-apa ketika tombol ditekan kecuali bahwa situs tersebut dimuat lagi. Bagi saya berfungsi dengan baik ...

Torabe
sumber