11540 sujets

JavaScript, DOM et API Web HTML5

Passer au champs suivant via la touche entrée

Bonjour,

je souhaite passer d'un champs a un autre en appuyant sur la touche entrée.
D'ordinaire on utilise la touche tabulation mais pour une raison de confort c'est la touche entrée qui doit me faire ça.

Comportement voullu du programme
Deux champs visible :
le premier est le code du produit, on entre le code on appuie sur entrée et ca passe au seconde champs : la quantité. Une fois la quantité choisie on tape entrée et ca valide le formulaire.

voici le code de départ :

<form action='page.php'>
<input type='text' name='codeproduit'>
<input type='text' name='quantité'>
<div style="visibility: hidden">
<input type='submit' valu='valider panier' />
</div>
</form>


je cache l' input type submit mais grace a la touche entrée je peux valider le formulaire.
Donc en gros je cherche le moyen de changer la fonction de la touche entrée sur le premier champs et de le remplacer par la touche tabulation.

un autre moyen existe peut etre, mais je cherche le plus simple possible.

Merci
Salut,

koreldy a écrit :
pour une raison de confort c'est la touche entrée qui doit me faire ça.
Qui dit ça ? Smiley rolleyes

Ce qui est confortable au contraire c'est d'avoir un comportement normal de son navigateur : lorsque j'utilise la touche Entrée je m'attends à ce que le formulaire soit soumis (ou à passer à la ligne si je me trouve dans un TEXTAREA).

D'autre part beaucoup d'internautes utilisent une souris ou un touchpad : ils vont d'abord chercher désespérément l'INPUT submit... puis essayer la touche Entrée... jusqu'à ce qu'enfin (après que chaque champ ait reçu le focus ?) le formulaire soit soumis...

En bref ça me semble une très mauvaise idée. Smiley cligne
peut on passer par du javascript pour utiliser ONKEYPRESS une fonction qui me fait incrementer le numero de l element du formulaire s'il est le numero 0 alors on passe a l'element 1 sinon on valide ?
pardon j avais pas vu la réponse.

Je parle de confort car pour moi c'est un programme destiné a etre en local, un programme de vente et mon espace de travail est limité.
J'utilise donc juste un clavier numérique uniquement.

Je souhaite utilisé du html car dans l avenir je compte bien acheter d'autre boutique et donc passer par internet.
Ah ok. Du coup il faudrait regarder du côté de onkeydown et donner le focus à l'élément suivant (ou soumettre le formulaire pour le dernier) sur Entrée.
excuse moi, je suis assez bon en html et php mais pour du javascript ou autre .... je ne sais meme pas ce qu'est un focus Smiley smile
Heyoan a écrit :
Alors c'est une bonne occasion pour apprendre ! Smiley langue

Un bon début pourrait être Comment bien coder en Javascript (qui contient en outre plusieurs liens intéressant).

L'initiation à un framework tel que jQuery pourrait aussi être une bonne idée.


Les "liens intéressants" sont à la fin de l'article car je ne crois pas qu'il soit destiné à un débutant total en JS comme semble l'être koreldy Smiley cligne
merci, j'utilise un site professionnel ( altadis ) qui lui utilise ce que ej veux faire.
d'apres ce que je comprends du code le programmeur fait un test sur la touche pressée, si c'est entrée alors il incremente la variable element du formulaire de 1. si c'est le deuxieme champs alors il valide le formulaire.

c'est donc vers cette piste que je dois me tourner ?!

Je ne me vois as apprendre le JS juste pour une infime partie du script total.
Merci pour les liens je ferai ca dans un futur tres proche.
bon voila, pour les prochains j'ai la solution. Voici le code le plus simple que j'ai trouvé :


<html>
 <head>
   <title> formulaire de saisie perso </title>
 </head>

<body bgcolor="#aaaaaa" text="#000000" background="images/fond.jpg">
<script type="text/javascript">
<!--
function verifTouche2(event){
			var keycode;
			keycode = event.which;
			if (window.event){ 
				keycode = window.event.keyCode;
			}
			if ( keycode == 13 ){
				document.forms["horsBon"].elements["quantite"].focus();
			}	
		}	

		function verifTouche3(event){
			var keycode;			
			keycode = event.which;
			if (window.event){ 
				keycode = window.event.keyCode;
			}
			if ( keycode == 13){
				validationHorsBon();
				}
		}		
function validationHorsBon() {				
			document.forms["horsBon"].submit();			
		}
-->
</script>


<form name="horsBon"  action="page.php" method="post">
Code produit : 
<input maxlength='8' size='8' id='idproduit' name='produit' onkeypress='javascript:verifTouche2(event);'>							
<br>Quantité : 
<input maxlength="4" size="4" name="quantite" onkeypress="javascript:verifTouche3(event);">
<br><a href="javascript:validationHorsBon();">Valider</a>
</form>


</body>
</html>
Gilles a écrit :
Les "liens intéressants" sont à la fin de l'article car je ne crois pas qu'il soit destiné à un débutant total en JS comme semble l'être koreldy
Tout à fait : je parlais bien de ceux-là. Smiley smile

@koreldy > ton code est effectivement simple mais le moins que l'on puisse dire est qu'il n'est pas factorisé. Smiley cligne
Du coup si on rajoute des éléments INPUT il faut recréer une nouvelle fonction à chaque fois.

Un exemple de code plus portable :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>
<body>
<?php
if($_SERVER['REQUEST_METHOD']=='POST') echo '<p>Le Formulaire a été soumis</p>';
?>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" id="horsBon" method="post" onsubmit="if(W3DOM) return false;">
	<p>
		<label for="prenom">Prénom :</label>
		<input type="text" name="prenom" id="prenom" />
	</p>
	<p>
		<label for="nom">Nom :</label>
		<input type="text" name="nom" id="nom" />
	</p>
	<p>
		<label for="nom">Surnom :</label>
		<input type="text" name="surnom" id="surnom" />
	</p>
	<p>
		<label for="nom">Pseudo :</label>
		<input type="text" name="pseudo" id="pseudo" />
	</p>
	<p>
		<input type="submit" />
	</p>
</form>
<script type="text/javascript">
// Le navigateur reconnaît-il le DOM ?
var W3DOM = document.getElementById && document.getElementsByTagName;

// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

// ajout de trim
String.prototype.trim = function() {
    return this.replace(/(?:^\s+|\s+$)/g, "");
}

// fonction focus sur INPUT suivant ou soumission
var oFocusNext =
{
	// Initialisation
	_Init: function()
	{
		// Pour chaque INPUT on initialise la fonction _FocusNext
		for(iIter = 0; iIter < oFocusNext._INPUTs().length; iIter++) {
			addEvent(oFocusNext._INPUTs()[iIter], 'keydown', oFocusNext._FocusNext, false);
		}
		// Focus sur le premier INPUT
		oFocusNext._INPUTs()[0].focus();
	},
	
	// Focus sur INPUT suivant
	_FocusNext: function(event)
	{
		var key = event.which || event.keyCode;
		// on ne fait rien sauf sur Entrée
		if(key != 13) return;

		var oElem = event.target || window.event.srcElement;
		var oNextInput = '';
		for(iIter = oFocusNext._INPUTs().length - 1; iIter >= 0; iIter--) {
			if(oFocusNext._INPUTs()[iIter].id == oElem.id) {
				if(oNextInput != '') {
					oNextInput.focus();
					return false;
				} else { // Dernier INPUt -> validation du formulaire
					oFocusNext._VerifForm();
				}
			} else {
				oNextInput = oFocusNext._INPUTs()[iIter];
			}
		}
	},
	
	// Fonction vérifier le formulaire
	_VerifForm: function()
	{
		for(iIter = 0; iIter < oFocusNext._INPUTs().length-1; iIter++) {
			oFocusNext._INPUTs()[iIter].value = oFocusNext._INPUTs()[iIter].value.trim();
			if(oFocusNext._INPUTs()[iIter].value == '') {
				oFocusNext._INPUTs()[iIter].focus();
				alert('Champ obligatoire !');
				return false;
			}
		}
		oFocusNext._Cont().submit();
	},

	// Conteneur
	_Cont: function()
	{
		var Cont = document.getElementById(oFocusNext.IdForm);
		return Cont;
	},
	
	// éléments INPUT
	_INPUTs: function()
	{
		var oInputs = oFocusNext._Cont().getElementsByTagName('input');
		return oInputs;
	},
	
	// Id Formulaire
	IdForm: 'horsBon'
};
// Si le navigateur reconnaît le DOM on initialise la fonction
if(W3DOM) { addEvent(window, 'load', oFocusNext._Init, false); }
</script>
</body>
</html>

Modifié par Heyoan (15 Dec 2009 - 14:15)
Sujet clos
Aller à