[Résolu] Submit, image et clavier

Bonsoir
J'ai une balise form de recherche sur mon site dont le bouton "submit" est remplacé par une image de loupe

<form id="newsSearchForm" action="https://www.google.fr/search" method="get" target="_parent">
	<input id="newsSearch" placeholder="Rechercher dans les News..." type="text">&nbsp;<img src="/loupe-1.gif" alt="" onclick="newsSearch();" title="Rechercher dans les News...">
	<input id="newsInput" name="q" value="" type="hidden">
	<input name="hl" value="fr" type="hidden">
</form>

Quand on clique sur l'icône, la fonction newsSearch() prend le contenu de la balise de même nom, la préfixe par "site:nom_de_mon_site/news et met le tout dans la balise suivante, puis fait submit.
Problème: les utilisateurs sont en train d'entrer des données avec leur clavier, et donc la réaction est d'appuyer sur "enter" pour soumettre la requête, ce qui ne passe donc pas par la fonction newsSearch() ....
Dans le contexte en cause, je ne peux pas uitliser jQuery
Quelqu'un aurait il une solution à proposer?
Modifié par PapyJP (15 May 2015 - 19:33)

La solution est très simple, utilise un input image.

	<input id="newsSearch" placeholder="Rechercher dans les News..." type="text">&nbsp;<input type="image" src="/loupe-1.gif" alt="Rechercher" onclick="newsSearch();" title="Rechercher dans les News..."> 

En outre:
1 - L'image avait un alt vide. L'alt ne doit jamais être vide pour les images qui ont une action au clic, sans cela les utilisateurs de lecteurs d'écran n'ont aucune possibilité de déclencher l'action; de plus elle doit être focusable car sinon les utilisateurs du clavier peuvent aussi être embêtés.
2 - Il manque un label; il est obligatoire !

Cependant, ta plus grosse erreur de conception ici réside dans le fait qu'il faut toujours prévoir un bouton de soumission dans un formulaire, fusse-t-il être caché aux yeux des utilisateurs. Car sinon tu t'exposes à des surprises ou des comportements inattendus lorsqu'il est soumis avec la touche enter. Ici tu t'étonnes qu'il soit possible de passer au travers de ta fonction javascript; mais certains navigateurs n'envoie carrément pas le formulaire lorsqu'on appuie sur enter s'il n'y a pas de bouton de soumission, et se contentent d'un bip aussi frustrant qu'incompréhensible, par exemple (certaines versions d'IE entres autres). Mème si tu fais un traitement entièrement AJAX, il doit toujours y avoir un bouton de soumission dans un formulaire.

Merci de cette réponse circonstanciée.
Je n'avais jamais essayé de faire des formulaires "simplifiés". Je déduis de ta réponse que c'est pratiquement infaisable.
Je change mon code de test et je te dis ce qu'il en est.

Ayant appliqué les principes expliqués par Quentin, j'ai obtenu le résultat suivant, qui correspond à peu près à ce que je cherche à faire: http://paralletes.free.fr/tests/search-test.html

Le seul point que j'aimerais améliorer, mais c'est un détail: lorsqu'on réaffiche la page, la valeur précédemment entrée dans le champ de saisie est affichée à nouveau. Pour éviter cela, j'ai effacé le contenu de ce champ avant de procéder à l'appel de Google. Néanmoins sela se voit durant une fraction de seconde.
Connaitriez vous un moyen d'éviter ce désagrément?
Modifié par PapyJP (16 May 2015 - 12:00)

J'ai trouvé!

<input id="newsSearchInput" type="text" placeholder="Rechercher dans les News..." style="width:50%;" required="required" autocomplete="off"/>

a écrit :
Je n'avais jamais essayé de faire des formulaires "simplifiés". Je déduis de ta réponse que c'est pratiquement infaisable.

Qu'est-ce que tu entens par formulaires simplifiés ?

Que tu fasses n'importe quel formulaire, les labels et le bouton d'envoi sont indispensables, sauf cas très spécifiques. IL en va de leur accessibilité.

Les formulaires sont sans doute une des choses les plus difficiles à rendre accessibles pour les non initiés (et les 9 plugins sur 10 qui disent le faire et qui ne le font qu'à moitié n'aident pas), mais c'est aussi une des choses qui est le plus urgent à rendre accessible. Aussi simple et imparable que pas de formulaire, pas de commande.

QuentinC a écrit :
Qu'est-ce que tu entends par formulaires simplifiés ?

Un formulaire qui ne comporte qu'une seule zone d'entrée, sans bouton submit et toutes les autres choses que tu as fort justement rappelées.