Saya punya satu input teks dan satu tombol (lihat di bawah). Bagaimana saya bisa menggunakan JavaScript untuk memicu acara klik tombol ketika Entertombol ditekan di dalam kotak teks?
Sudah ada tombol kirim yang berbeda di halaman saya saat ini, jadi saya tidak bisa hanya membuat tombol tombol kirim. Dan, saya hanya ingin Enterkunci untuk mengklik tombol spesifik ini jika ditekan dari dalam kotak teks yang satu ini, tidak ada yang lain.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
javascript
button
onclick
onkeypress
kdenney
sumber
sumber
Jawaban:
Di jQuery, yang berikut ini akan berfungsi:
Atau dalam JavaScript biasa, yang berikut ini akan berfungsi:
sumber
keydown
bukankeyup
adalah acara yang lebih baik untuk digunakan. Juga, jika Anda menggunakan asp.net, Anda harusreturn false
menghentikan asp.net di akhir acara.keydown
adalah bahwa menekan enter akan memunculkan event berulang-ulang. jika Anda melampirkan kekeyup
acara tersebut, itu hanya akan menyala setelah kunci dilepaskan.event.preventDefault();
sebelum memohonclick();
fungsi sementara halaman saya memiliki bentuk dan saya sudah beralihkeyup
dengankeypress
seperti itu handler hanya bekerja untuk saya, lagian, terima kasih untuk sepotong rapi kode!Maka cukup masukkan dalam kode!
sumber
Menemukan ini:
sumber
Jadikan tombol sebagai elemen kirim, jadi itu akan otomatis.
Perhatikan bahwa Anda akan memerlukan
<form>
elemen yang berisi bidang input untuk membuatnya berfungsi (terima kasih Sergey Ilinsky).Ini bukan praktik yang baik untuk mendefinisikan kembali perilaku standar, Enterkuncinya harus selalu memanggil tombol kirim pada formulir.
sumber
<form>
tag apa pun dibuang oleh parser HTML yang liberal. Jadi saya harus membajak tombol atau bust. (BTW, menekan Enter di SharePoint meluncurkan mode Edit untuk beberapa alasan. Saya kira pita menggunakan bentuk yang sama.)<button type="submit" onclick="return doSomething(this)">Value</button>
bekerja untuk. Petunjuknya terletak dalamreturn
kata kunciKarena belum ada yang menggunakan
addEventListener
, ini versi saya. Mengingat unsur-unsurnya:Saya akan menggunakan yang berikut ini:
Ini memungkinkan Anda untuk mengubah jenis acara dan tindakan secara terpisah sambil menjaga HTML tetap bersih.
sumber
e.preventDefault()
untuk membuatnya bekerja dengan formulir. Lihat jawaban (baru) saya .if (event.keyCode == 13) { event.preventDefault(); go.click();}
Dalam JavaScript biasa,
Saya perhatikan bahwa balasan diberikan hanya di jQuery, jadi saya berpikir untuk memberikan sesuatu dalam JavaScript juga.
sumber
evt.which ? evt.which : evt.keyCode
sama denganevt.which || evt.keyCode
Satu trik dasar yang dapat Anda gunakan untuk ini yang belum saya lihat sepenuhnya disebutkan. Jika Anda ingin melakukan tindakan ajax, atau pekerjaan lain di Enter tetapi tidak ingin mengirimkan formulir, Anda bisa melakukan ini:
Pengaturan action = "javascript: void (0);" seperti ini adalah jalan pintas untuk mencegah perilaku default pada dasarnya. Dalam hal ini metode disebut apakah Anda menekan enter atau mengklik tombol dan panggilan ajax dibuat untuk memuat beberapa data.
sumber
searchCriteria.blur();
keonsubmit
.Cobalah:
sumber
Untuk memicu pencarian setiap kali tombol enter ditekan, gunakan ini:
sumber
Ini hanya sesuatu yang saya miliki dari proyek yang agak baru ... Saya menemukannya di internet, dan saya tidak tahu apakah ada cara yang lebih baik atau tidak dalam JavaScript lama.
sumber
Gunakan
keypress
danevent.key === "Enter"
dengan JS modern!Mozilla Docs
Browser yang Didukung
sumber
Meskipun, saya cukup yakin bahwa selama hanya ada satu bidang dalam formulir dan satu tombol kirim, menekan enter harus mengirimkan formulir, bahkan jika ada formulir lain di halaman.
Anda kemudian dapat menangkap form onsubmit dengan js dan melakukan validasi atau panggilan balik apa pun yang Anda inginkan.
sumber
Tidak ada yang memperhatikan html attibute "accesskey" yang tersedia sejak beberapa saat.
Ini bukan cara javascript untuk barang pintasan keyboard.
Accesskey menghubungkan pintasan di MDN
Dimaksudkan untuk digunakan seperti ini. Atribut html itu sendiri sudah cukup, bagaimana kita bisa mengganti placeholder atau indikator lain tergantung dari browser dan os. Script adalah pendekatan awal yang belum teruji untuk memberikan ide. Anda mungkin ingin menggunakan pendeteksi pustaka browser seperti bowser kecil
sumber
s
.Ini adalah solusi untuk semua pecinta YUI di luar sana:
Dalam kasus khusus ini saya memang memiliki hasil yang lebih baik menggunakan YUI untuk memicu objek DOM yang telah disuntikkan dengan fungsi tombol - tapi ini adalah cerita lain ...
sumber
Di Angular2 :
Jika Anda tidak ingin umpan balik visual pada tombol, itu adalah desain yang baik untuk tidak merujuk tombol tetapi langsung memanggil controller.
Selain itu, id tidak diperlukan - cara NG2 lain untuk memisahkan antara tampilan dan model.
sumber
Dalam hal ini Anda ingin juga mengaktifkan tombol enter dari Posting ke server dan menjalankan skrip Js.
sumber
Upaya pertukaran ini sudah dekat, tetapi perilaku buruk sehubungan dengan browser saat itu (pada Safari 4.0.5 dan Firefox 3.6.3), jadi pada akhirnya, saya tidak akan merekomendasikannya.
sumber
Gunakan saat menangani acara atau dalam fungsi yang dipanggil oleh pawang acara Anda.
Paling tidak berfungsi di Internet Explorer dan Opera.
sumber
Untuk ponsel jquery harus saya lakukan
sumber
.live
tidak digunakan dalam jQuery 1.7. Apakah masih dianggap OK di jQuery Mobile?Untuk menambahkan solusi JavaScript benar-benar polos yang ditujukan @ masalah icedwater dengan pengiriman formulir , inilah solusi lengkap dengan
form
.Biola: https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
JavaScript
sumber
Dalam Javascript modern, tidak patut (tanpa
keyCode
atauonkeydown
):sumber
Inilah dua sen saya. Saya sedang mengerjakan aplikasi untuk Windows 8 dan ingin tombol untuk mendaftarkan acara klik ketika saya menekan tombol Enter. Saya melakukan ini di JS. Saya mencoba beberapa saran, tetapi ada masalah. Ini berfungsi dengan baik.
sumber
charCode
13 di tempat lain, Anda melepaskanprintResult()
.Untuk melakukannya dengan jQuery:
Untuk melakukannya dengan JavaScript normal:
sumber
Bagi mereka yang mungkin suka singkat dan pendekatan modern js.
di mana input adalah variabel yang mengandung elemen input Anda.
sumber
Untuk JS modern
keyCode
sudah usang, gunakankey
sajasumber
Di jQuery, Anda bisa menggunakan
event.which==13
. Jika Anda memilikiform
, Anda dapat menggunakan$('#formid').submit()
(dengan acara yang benar pendengar ditambahkan ke penyerahan formulir tersebut).sumber
Saya telah mengembangkan javascript khusus untuk mencapai fitur ini dengan hanya menambahkan kelas
Contoh:
<button type="button" class="ctrl-p">Custom Print</button>
Di sini, Coba Fiddle
- atau -
lihat contoh yang sedang berjalan https://stackoverflow.com/a/58010042/6631280
sumber
Ini juga mungkin membantu, fungsi JavaScript kecil, yang berfungsi dengan baik:
Saya tahu pertanyaan ini sudah terpecahkan, tetapi saya baru saja menemukan sesuatu, yang dapat membantu orang lain.
sumber