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

Klik Butang Pencetus dengan JavaScript pada Kunci Enter dalam Kotak Teks

JavaScript menawarkan penyelesaian yang mudah untuk mencetuskan peristiwa klik butang apabila menekan kekunci Enter dalam kotak teks tertentu . Mari kita mendalami penyelesaiannya:

Pelaksanaan jQuery:

Dalam rangka kerja jQuery, coretan kod berikut mencapai gelagat yang diingini:

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

Begini caranya:

1. The Pemilih $("#id_of_textbox") menyasarkan kotak teks dengan ID yang ditentukan.
2. Pendengar acara keyup memantau apabila kekunci Enter dikeluarkan dalam kotak teks.
3. Di dalam pengendali acara, harta acara.keyCode menyemak sama ada kod kekunci yang ditekan sepadan dengan kekunci Enter (13).
4. Jika kekunci Enter ialah ditekan, pernyataan $("#id_of_button").click() mensimulasikan peristiwa klik pada butang yang ditentukan.

Pelaksanaan JavaScript Asli:

Untuk JavaScript tulen, kod berikut boleh digunakan:

const textbox = document.getElementById("id_of_textbox");
const button = document.getElementById("id_of_button");

textbox.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
        button.click();
    }
});

Ini kod:

1. Merujuk kotak teks dan elemen butang menggunakan ID mereka.
2. Melampirkan pendengar acara tekan kekunci pada kotak teks.
3. Di dalam pengendali acara, ia menyemak sama ada kekunci yang ditekan ialah kekunci Enter.
4. Jika kekunci Enter ditekan, kaedah button.click() mensimulasikan klik pada butang.

Pertimbangan Pelaksanaan:

1. Menentukan ID: Pastikan kotak teks dan elemen butang mempunyai ID unik untuk kod berfungsi dengan betul.
2. Mengelakkan Borang Hantar: Jika kekunci Enter digunakan untuk menyerahkan borang, ia mungkin bercanggah dengan peristiwa klik butang. Untuk mengelakkan ini, elakkan menggunakan kekunci Enter untuk penyerahan borang jika boleh.
3. Keserasian: Penyelesaian penekanan kekunci dianggap lebih moden daripada keyup, tetapi keyup mungkin diperlukan untuk penyemak imbas lama.

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