Masukkan klik tombol pemicu

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.

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.

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.

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.

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`*/
});

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.

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.

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.

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.

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

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.

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

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