Comment déclencher un clic sur un bouton avec la touche Entrée de JavaScript dans une zone de texte ?

Cliquez sur un bouton avec JavaScript sur la touche Entrée dans la zone de texte

JavaScript offre une solution pratique pour déclencher un événement de clic sur un bouton en appuyant sur la touche Entrée dans une zone de texte spécifique . Examinons la solution :

Implémentation de jQuery :

Dans le framework jQuery, l'extrait de code suivant atteint le comportement souhaité :

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

Voici comment cela fonctionne :

1. Le $("#id_of_textbox") Le sélecteur cible la zone de texte avec l'ID spécifié.
2. L'écouteur d'événement keyup surveille le moment où la touche Entrée est relâchée dans la zone de texte.
3. Dans le gestionnaire d'événements, la propriété event.keyCode vérifie si le code de la touche enfoncée correspond à celui de la touche Entrée (13).
4. Si la touche Entrée a été enfoncée, l'instruction $("#id_of_button").click() simule un événement de clic sur le bouton spécifié.

Implémentation JavaScript native :

Pour du JavaScript pur, le code suivant peut être utilisé :

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

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

Ce code :

1. Référence aux éléments de la zone de texte et du bouton en utilisant leur ID.
2. Attache un écouteur d'événement de pression de touche à la zone de texte.
3. Dans le gestionnaire d'événements, il vérifie si la touche enfoncée est la touche Entrée.
4. Si la touche Entrée a été enfoncé, la méthode button.click() simule un clic sur le bouton.

Implémentation Considérations :

1. Spécification des identifiants : Assurez-vous que les éléments de la zone de texte et du bouton ont des identifiants uniques pour que le code fonctionne correctement.
2. Éviter la soumission d'un formulaire : Si la touche Entrée est utilisée pour soumettre un formulaire, elle peut entrer en conflit avec l'événement de clic du bouton. Pour éviter cela, évitez si possible d'utiliser la touche Entrée pour soumettre un formulaire.
3. Compatibilité : La solution keypress est considérée comme plus moderne que keyup, mais keyup peut être nécessaire pour les navigateurs plus anciens.

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!