Bonjour,

J'ai créé une barre de recherche comme ci-dessous :

<div class="search-bar">
    <input type="text">
    <img src="img/search-icon.png" alt="Search icon"/>
</div>

Je voudrais que lorsque l'utilisateur appui sur la touche "Entrer" de son clavier (en ayant focus l'input bien sûr), cela exécute une fonction JavaScript.

Mon problème est de récupérer l'appui de cette touche au focus de l'input afin d'exécuter la fonction.

Savez-vous comment faire cela ?

Merci d'avance pour vos réponses

-
Edité par TitouanDev 11 avril 2021 à 19:34:55

Bonjour,

une possibilité c'est de mettre ton <input> dans un <form>, et de capturer la soumission du form (qui se fait avec la touche Entrée). À noter qu'une <img> pour le bouton de recherche, c'est non : utilise un <button>, ça soumettra le form aussi, et ça sera bien plus propre (c'est son boulot, au button, d'être sélectionné/cliqué, et en plus ça sera accessible au clavier).

Bonjour, tu peut quand mettre ton image en tant qu'enfant du bouton et cela te permet de lui mettre le type submit,

et mettre la bar de recherche dans une balise form en plus de pouvoir capturé l'envoi avec la touche entrée de façon automatique, plus tard cela pourras te permettre de faire fonctionné la bar de recherche sans Javascript.

Tu peut ajouté du CSS sur le boutton pour qu'il et une apparence "neutre" si tu veut qu'on ne voit que l'image, il sera quand même accessible au clavier.

<div class="search-bar">
	<form>    	
        <input type="text">

        <button type="submit">
        	<img src="img/search-icon.png" alt="Search icon"/>
        </button>
    </form>
</div>

 Ensuite pour capturé l'envoi du formulaire tu ajoute un écouteur d'évenement de type "submit" sur le formulaire lorsque utilisateur appui sur la touche entrée avec le focus dans le input cela déclenche l'envoi du formulaire sans devoir manuellement écouté l'appui des touche dans le input.

// en admettant que "form" et une séléction valide du document
form.addEventListener('submit', function(event) {

	// annule le comportement par défaut
    // ici l'envoie des donnée à la source
	event.preventDefault();
    
    // ... ...
});