Acara Klik Tombol menyala ketika menekan tombol Enter di input yang berbeda (tidak ada formulir)

111

Logika ini aktif saat menekan "Enter" di masukan "Jumlah", dan saya rasa seharusnya tidak (tidak di Chrome). Bagaimana cara mencegah hal ini, dan jika tidak mencegahnya di IE, tangani agar logika di acara klik tidak menyala.

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

Naskah

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Pertanyaan: 1.7.2
  • IE 9
  • (Bekerja di Chrome)
jquery internet-explorer contactmatt
sumber
1
Bertentangan dengan pertanyaan, ini baru saja terjadi pada saya dengan Chrome dan Firefox. Perbaikan yang sama sekalipun (tipe tombol).
Tim Grant

Jawaban:

324

Saya memiliki masalah yang sama dan menyelesaikannya dengan menambahkan type="button"atribut ke <button>elemen, di mana IE menganggap tombol sebagai tombol sederhana, bukan tombol kirim (yang merupakan perilaku default dari suatu <button>elemen).

pallati
sumber
6
Saya memiliki masalah yang sama dengan Firefox. atribut type = "button" juga memecahkannya untuk saya
Alexander Fradiani
109
Semoga Anda hidup seribu tahun.
TheBrain
4
Perbaikan luar biasa. Saya pikir browser hanya akan mengirimkan otomatis pada "Enter" saat berada di dalam tag <form>. Tapi saya lihat saya salah.
Clayton Bell
2
Hari-hari berteriak pada IE9 (di antara jenderal saya berteriak pada hal-hal lain yang harus saya teriakkan) dan inilah solusinya. Dang panas.
phatskat
5
Telah digigit oleh masalah ini dua kali hanya dalam beberapa minggu. Rasanya aneh harus memanggil type="button"sebuah <button>elemen. haha ... :) Semoga saya mengingat ini untuk lain waktu.
Sam
33

Saya mengalami masalah ini hari ini. IE mengasumsikan bahwa jika Anda menekan tombol enter di salah satu kolom teks, Anda ingin mengirimkan formulir - meskipun kolom tersebut bukan bagian dari formulir dan bahkan jika tombol tersebut bukan jenis "kirim".

Anda harus mengganti perilaku default IE dengan preventDefault (). Di pemilih jQuery Anda, masukkan div yang berisi kotak teks yang ingin Anda abaikan tombol enter - dalam kasus Anda, div "halaman". Daripada memilih div secara keseluruhan, Anda juga dapat menentukan kotak teks yang ingin Anda abaikan secara spesifik.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});
Christian Clinton
sumber
Solusi terbaik saat Anda perlu menggunakan komponen khusus, dan Anda tidak dapat menambahkan type = "tombol".
FireZenk
Terima kasih Clinton, ini berhasil untuk saya. Saya pertama kali mencoba membuat semua tombol jenis "tombol" tetap tidak berhasil. Lalu saya harus menekan acara menggelegak saat tekan tombol enter.
Rupesh Kumar Tiwari
Terima kasih banyak. Saya telah mengamuk di komputer saya selama 2 jam terakhir.
Edwin
4

Saya mengalami masalah ini dengan ASP.NET WebForms:

<asp:Button />

Ini TIDAK dapat diselesaikan hanya dengan menambahkan type = "button" karena ASP.NET menggantinya dengan type = "submit" (Anda dapat melihat perilaku ini di browser jika Anda memeriksa elemen.)

Cara yang benar untuk melakukan ini di asp.net adalah dengan menambahkan 

<asp:Button UseSubmitBehavior="false" />

ke tombol. ASP secara otomatis akan menambahkan atribut type = "button".

Guilherme
sumber
2

IE menganggap buttonelemen apa pun adalah tombol kirim (apakah Anda memiliki formatau tidak). Ini juga menangani penekanan Enterkunci dalam elemen formulir sebagai pengiriman formulir implisit. Jadi, karena dianggap Anda mencoba mengirimkan formulir Anda, ia memperkirakan itu akan membantu Anda keluar dan mengaktifkan clickacara di (menurut pendapatnya) tombol kirim .

Anda dapat melampirkan keyupacara ke inputatau buttondan memeriksa Enterkey ( e.which === 13) danreturn false;

Monyet Sesat
sumber
1

Solusi berbasis jQuery yang melakukan ini untuk setiap tombol adalah:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

Namun peristiwa klik masih akan menggelembung ke elemen induk karena beberapa alasan ...

lschult2
sumber
0

Untuk Chrome Anda dapat menambahkan <button type="submit" style="display:none"/> Karena Di chrome jenis tombol default adalah "kirim '

Untuk IE, saya telah mencoba yang sama dengan type="button"(Dalam jenis tombol default IE adalah "tombol") Tetapi tidak bekerja dengan baik.

Jadi inilah solusinya. Dalam HTML tambahkan (keypress)=xxx($event)di formulir Anda. Di TS,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

Hal di atas akan berfungsi di semua skenario seperti lintas browser, klik normal, dan aliran tab.

Tamil.S
sumber