Bagaimanakah Saya Boleh Mencetuskan Klik Butang dengan JavaScript Apabila Kekunci Enter Ditekan dalam Kotak Teks?

Mencetuskan Klik Butang dengan JavaScript pada Kekunci Masukkan Kotak Teks

Dalam pembangunan web, selalunya wajar untuk mencetuskan tindakan pada elemen bentuk, seperti butang, apabila peristiwa tertentu berlaku. Satu senario biasa ialah mencetuskan klik butang apabila kekunci Enter ditekan dalam medan input teks. Begini cara anda boleh mencapai ini dengan JavaScript:

Menggunakan jQuery

jQuery, perpustakaan JavaScript yang popular, menyediakan penyelesaian mudah untuk masalah ini:

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

Kod ini melampirkan pendengar acara keyup pada medan input teks dengan ID "id_of_textbox." Apabila kekunci Enter (keyCode 13) ditekan dalam input ini, ia mencetuskan acara klik pada butang dengan ID "id_of_button."

JavaScript Tersuai

Jika anda memilih untuk tidak menggunakan perpustakaan, anda boleh melaksanakan fungsi ini menggunakan JavaScript biasa:

document.getElementById("id_of_textbox").addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

Kod ini berfungsi tugas yang sama seperti contoh jQuery, tetapi ia menggunakan kaedah addEventListener() asli untuk melampirkan pendengar kekunci pada input teks.

Contoh Penggunaan

Pertimbangkan perkara berikut Penanda HTML:

<input type="text">

Untuk mencetuskan butang "btnSearch" klik apabila Enter ditekan dalam input "txtSearch", anda akan menggunakan salah satu coretan kod yang disediakan, menggantikan ID elemen dengan sewajarnya.

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