Discussion :

[pierrot10]

Bonjour,
j'ai un petit formulaire de deux champs, sans le bouton submit.
A la place du bouton submit, j'ai mis un lien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:document.f_login.submit();" title="Se connecter" onclick="">Se connecter</a>

Quand je clique sur Se connecter, ca marche très bien.

Mais quand je tape Enter, ca ne fait rien et je pense que c'est a cause du bouton submit qui 'est pas.


Comment pourrais-je alors faire ceci?

[Erwan31]

Bonsoir,
il faut que tu transfères javascript:document.f_login.submit(); dans le onclick (sans javascript: ) pour que la touche enter déclenche l'évènement onclick.
Pour info le couplage avec un onkeypress est inutile pour le éléments qui reçoivent le focus.

[pierrot10]

ha oui, mais j'aimerai qu'une fois le deuxieme champs rempli, que le formulaire soit envoyé en tapant enter sans devoir mettre le focus sur le lien.

[ohneAkzent]

Quel est l'intéret de ne pas utiliser le bouton submit ? Tu n'as qu'à l'utiliser et le styler pour qu'il ressemble à un vulgaire lien, si ce n'est que ça qui te chagrine.

[Erwan31]

ha oui, mais j'aimerai qu'une fois le deuxieme champs rempli, que le formulaire soit envoyé en tapant enter sans devoir mettre le focus sur le lien.

Tu ferais mieux d'oublier ça, c'est pas du tout conventionnel et ça n'apporte presque rien, celui qui utilise le clavier sait généralement utiliser la touche tab pour faire "circule"r le focus au bon endroit. Et puis on est souvent pressé sur internet mais à ce point..

[Macmillenium]

Bonjour,

il faut que tu transfères javascript:document.f_login.submit(); dans le onclick (sans javascript: ) pour que la touche enter déclenche l'évènement onclick.

Les touches du clavier (y compris Enter) ne déclenchent pas l'événement onclick.
La solution, c'est de détecter le keyCode et déclencher la fonction JS dans l'événement onkeypress.

ha oui, mais j'aimerai qu'une fois le deuxieme champs rempli, que le formulaire soit envoyé en tapant enter sans devoir mettre le focus sur le lien.

Il suffit de mettre en place une simple fonction JavaScript qui gère tes événements, une idée vite fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
window.onload = function valideform() {
	var ldv = document.getElementById('lienValidation');
 
	ldv.onkeypress = toucheEnter;
	ldv.onclick = clique;
 
	function toucheEnter() {
		if (event.keyCode == 13) {
		document.forms['f_login'].submit();
		}
	}
 
	function clique() {
		document.forms['f_login'].submit();
	}
}

Et dans le html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<form action=".." method=".." id="f_login'">
<a href="#" title="Se connecter" id="lienValidation">Se connecter</a>
[...]

Préfère le DOM : document.forms["id"].submit(); est plus propre que document.name.submit();

[(Benoit)]

Normalement, lorsque tu appuie sur ENTER, le navigateur recherche un bouton SUBMIT dans la FORM ou tu te trouves. Si il le trouve, il submit la FORM.

Donc inutile de faire compliqué : il suffit juste d'ajouter un bouton de SUBMIT dans ta form, que tu cache avec un coup de style="display:none;"

[Macmillenium]

Normalement, lorsque tu appuie sur ENTER, le navigateur recherche un bouton SUBMIT dans la FORM ou tu te trouves. Si il le trouve, il submit la FORM.

Donc inutile de faire compliqué : il suffit juste d'ajouter un bouton de SUBMIT dans ta form, que tu cache avec un coup de style="display:none;"

Il y a des développeurs qui préfèrent tester les champs en JS avant l'envoi des formulaires (pour éviter de surcharger le serveur), dans ce cas, le submit pose un problème.

[(Benoit)]

Il y a des développeurs qui préfèrent tester les champs en JS avant l'envoi des formulaires (pour éviter de surcharger le serveur), dans ce cas, le submit pose un problème.

C'est exact, mais il suffit alors de placer un onsubmit sur la form :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form onsubmit="return valider(this)"> ...

[Erwan31]

Les touches du clavier (y compris Enter) ne déclenchent pas l'événement onclick.

Si, le onkeypress est inutile.

[Macmillenium]

Si, le onkeypress est inutile.

Le couplage onclick et onkeypress est utile, car comme tu le sais Erwan31, la touche Enter ne peut pas déclencher l'évènement onclick si l'élément n'a pas encore le focus, ce qui rend cet évènement uniquement accessible en accès clavier et lors du clique.
Je ne pense pas qu'un utilisateur dans des conditions normales pourra connaitre ce détail (d'où mon intervention, je commence toujours par traiter le cas général).

Sachant que onkeypress devient aujourd'hui extrêmement pratique pour les RIA ayant un background full AJAX.

Pour info le couplage avec un onkeypress est inutile pour le éléments qui reçoivent le focus.

Pas tous les éléments qui reçoivent le focus, cela ne fonctionne pas sur les input text, radio et checkbox.

[Erwan31]

Le couplage onclick et onkeypress est utile, car comme tu le sait Erwan31, la touche Enter ne peut pas déclencher l'évènement onclick si l'élément n'a pas encore le focus, ce qui rend cet évènement uniquement accessible en accès clavier et lors du clique.

Oui dans ce cas d'accord je ne faisais référence qu'aux éléments qui ont le focus mais ce genre de soumission prématurée (sur l'input text) n'est pas une solution recommandée.

Pas tous les éléments qui reçoivent le focus, cela ne fonctionne pas sur les input text, radio et checkbox.

Pas la touche enter mais la barre d'espace si (pour les checkbox et radios), pour l'input text ok ça j'ai jamais testé, faut dire aussi que c'est pas très commun comme implémentation.