Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mencetuskan Klik Butang dengan Kekunci Enter dalam Kotak Teks menggunakan JavaScript?

Bagaimana untuk Mencetuskan Klik Butang dengan Kekunci Enter dalam Kotak Teks menggunakan JavaScript?

Patricia Arquette
Lepaskan: 2024-12-20 08:57:11
asal
908 orang telah melayarinya

How to Trigger a Button Click with the Enter Key in a Text Box using JavaScript?

Butang Pencetus Klik dari Kotak Teks Masukkan Kunci dengan JavaScript

Untuk mencetuskan acara klik butang apabila kekunci Enter ditekan di dalam teks tertentu kotak, manfaatkan kod jQuery berikut:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});
Salin selepas log masuk

Begini caranya berfungsi:

  • $("#id_of_textbox"): Memilih elemen kotak teks mengikut IDnya.
  • .keyup(function(event)): Mendaftarkan pendengar acara keyup pada kotak teks.
  • event.keyCode === 13: Semak sama ada kod kekunci yang ditekan ialah 13, yang sepadan dengan Enter kunci.
  • $("#id_of_button").click(): Mencetuskan acara klik pada elemen butang dengan ID yang ditentukan.

Sebagai contoh, pertimbangkan HTML berikut:

<input type="text">
Salin selepas log masuk

Untuk mencetuskan butang "Cari" klik apabila Enter ditekan dalam kotak teks "txtSearch", gunakan jQuery ini kod:

$("#txtSearch").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#btnSearch").click();
    }
});
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Klik Butang dengan Kekunci Enter dalam Kotak Teks menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan