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 click
dipicu. 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.
Jawaban:
Menggunakan
harus melakukan trik.
Alasannya adalah karena tombol di dalam formulir memiliki jenisnya yang secara implisit diatur ke
submit
. Seperti zzzzBoz mengatakan, Spec mengatakan bahwa pertamabutton
atauinput
dengantype="submit"
yang dipicu dalam situasi ini. Jika Anda menetapkan secara khusustype="button"
, maka dihapus dari pertimbangan oleh browser.sumber
type="button"
sepertinya menyelesaikan ini ... Terima kasih! ps ada ide mengapa ini? ie8 memperlakukan tombol sebagai tipe kirim? Aneh.<input type="submit"/>
(akan memicu klik) dan<input type="button"/>
(tidak akan memicu klik)Penting untuk membaca spesifikasi HTML untuk benar-benar memahami perilaku apa yang diharapkan:
Spesifikasi HTML5 secara eksplisit menyatakan apa yang terjadi di
implicit submissions
: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.sumber
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.
sumber
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
Enter
bidang 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:
sumber
Di mana pun Anda menggunakan
<button>
elemen secara default akan mempertimbangkan tombol itutype="submit"
jadi jika Anda mendefinisikan tomboltype="button"
maka itu tidak akan menganggap itu<button>
sebagai tombol kirim.sumber
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.
sumber
click
tindakan pada elemen tombol keinginan adalah konsekuensi yang tidak diinginkanAnda dapat menggunakan javascript untuk memblokir pengiriman formulir hingga waktu yang tepat. Contoh yang sangat kasar:
Menekan enter masih akan memicu formulir untuk mengirim, tetapi javascript akan mencegahnya mengirimkan, sampai Anda benar-benar menekan tombol.
sumber
Contoh dom
javascript
jika Anda tidak menggunakan preventDefault (), tombol lain akan terpicu.
sumber
Saya akan melakukannya seperti berikut: Di handler untuk acara onclick tombol (tidak mengirimkan) periksa kode kunci objek acara. Jika "masuk", saya akan mengembalikan false.
sumber
Situasi saya memiliki dua
Submit
tombol di dalam elemen formulir:Update
danDelete
. TheDelete
tombol menghapus gambar danUpdate
tombol update database dengan bidang teks dalam bentuk.Karena
Delete
tombol itu pertama dalam bentuk, itu adalah tombol default padaEnter
tombol. Bukan yang saya inginkan. Pengguna berharap dapat menekanEnter
setelah mengubah beberapa bidang teks.Saya menemukan jawaban saya untuk mengatur tombol default di sini :
Tanpa menggunakan skrip apa pun, saya mendefinisikan bentuk yang dimiliki setiap tombol dengan menggunakan
<button> form="bla"
atribut. Saya mengaturDelete
tombol ke formulir yang tidak ada dan mengaturUpdate
tombol yang ingin saya picu padaEnter
tombol ke bentuk yang akan digunakan pengguna saat memasukkan teks.Ini adalah satu-satunya hal yang berhasil untuk saya sejauh ini.
sumber
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.
sumber
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 ...sumber