Comment puis-je déclencher un clic sur un bouton avec JavaScript lorsque la touche Entrée est enfoncée dans une zone de texte ?

Déclenchement de clics sur des boutons avec JavaScript sur la touche Entrée de la zone de texte

Dans le développement Web, il est souvent souhaitable de déclencher des actions sur des éléments de formulaire, tels que boutons, lorsque des événements spécifiques se produisent. Un scénario courant consiste à déclencher un clic sur un bouton lorsque la touche Entrée est enfoncée dans un champ de saisie de texte. Voici comment y parvenir avec JavaScript :

Utiliser jQuery

jQuery, une bibliothèque JavaScript populaire, fournit une solution simple à ce problème :

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

Ce code attache un écouteur d'événement keyup au champ de saisie de texte avec l'ID "id_of_textbox". Lorsque la touche Entrée (keyCode 13) est enfoncée dans cette entrée, elle déclenche l'événement de clic sur le bouton portant l'ID "id_of_button".

JavaScript personnalisé

Si vous préférez ne pas utiliser de bibliothèque, vous pouvez implémenter cette fonctionnalité en utilisant du JavaScript simple :

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

Ce code effectue la même tâche que l'exemple jQuery, mais il utilise la méthode native addEventListener() pour attacher l'écouteur keyup à la saisie de texte.

Exemple d'utilisation

Considérez le balisage HTML suivant :

<input type="text">

Pour déclencher le bouton "btnSearch", cliquez lorsque vous appuyez sur Entrée dans l'entrée "txtSearch", vous utiliserez l'un des codes fournis extraits de code, en remplaçant les ID d'élément en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!