Action Javascript: Simuler une touche clavier [Résolu/Fermé]

Signaler
Messages postés
85
Date d'inscription
samedi 8 novembre 2008
Statut
Membre
Dernière intervention
18 avril 2014
-
Messages postés
39021
Date d'inscription
mercredi 11 avril 2007
Statut
Modérateur
Dernière intervention
22 septembre 2020
-
Bonjour,
J'essaye de créer un moyen de naviguer dans un formulaire comme dans un tableau excel.
Donc je souhaite que à l'action de la flèche gauche, droite, bas et haut, me déplacer parmi les INPUT.

J'ai créé un code très simple pour réaliser ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>


<script language="JavaScript">
function test(pEvent){
      switch (event.keyCode)
    {
        case 40:
        alert('Reste a faire laction')
        break;
    }
}
</script>

</head>

<body>
<body onKeyDown="javascript:test(event);">

<p><input name="1" type="text" id="1" size="10" tabindex="1"/>
<input name="101" type="text" id="101" size="10" tabindex="101"/>
<input name="102" type="text" id="201" size="10" tabindex="201"/></p><p>
<input name="" type="text" id="2" size="10" tabindex="2"/>
<input name="1" type="text" id="102" size="10" tabindex="102"/>
<input name="1" type="text" id="202" size="10" /></p><p>
<input name="1" type="text" id="3" size="10" tabindex="3"/>
<input name="1" type="text" id="103" size="10" tabindex="103"/>
<input name="1" type="text" id="203" size="10" tabindex="203"/></p>
</body>
</html>


A la place de faire une alerte j'aimerai faire l'action "TAB" du clavier. Pour aller à la ligne. Quelqu'un sait il appeler une touche clavier comme TAB dans une action javascript?
Ou directement lui dire d'aller à l'INPUT avec l'ID suivant? Ce qui m'aiderai comme ça je lui rajoute +100 pour la flèche de droite et -100 pour la flèche de gauche.
Merci d'avance

1 réponse

Messages postés
85
Date d'inscription
samedi 8 novembre 2008
Statut
Membre
Dernière intervention
18 avril 2014
1
J'ai trouvé ma solution à force d'essayer et d'assembler des bouts de codes trouvé sur 20000 site différents. Voici mon code pour ceux que ça peut aider

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>

<body>
<script type="text/javascript">
function recup(id)
{
   this.num = id;
	}

function test(pEvent){
      switch (event.keyCode)
    {
        case 40:
		
		var idpre = num
		var bas = 1
		var result = Number(idpre) + Number(bas)
		var idpre = result
		document.forms["general"].elements[result].focus()
        break;
		
		
		case 38:
		var idpre = num
		var haut = 1
		var result = Number(idpre) - Number(haut)
		var idpre = result
		document.forms["general"].elements[result].focus()
        break;
		
		
		case 37:
		var idpre = num
		var gauche = 100
		var result = Number(idpre) - Number(gauche)
		var idpre = result
		document.forms["general"].elements[result].focus()
        break;
		
		
		case 39:
		var idpre = num
		var droite = 100
		var result = Number(idpre) + Number(droite)
		var idpre = result
		document.forms["general"].elements[result].focus()
        break;
    }
}
</script>

<body onKeyDown="javascript:test(event);">

<p>
<FORM name="general">
<input name="101" type="text" id="101" size="10" onFocus="recup(this.id)"/>
<input name="201" type="text" id="201" size="10" onFocus="recup(this.id)"/>
<input name="301" type="text" id="301" size="10"  onFocus="recup(this.id)"/></p><p>
<input name="102" type="text" id="102" size="10" onFocus="recup(this.id)"/>
<input name="202" type="text" id="202" size="10" onFocus="recup(this.id)"/>
<input name="302" type="text" id="302" size="10" onFocus="recup(this.id)"/></p><p>
<input name="103" type="text" id="103" size="10" onFocus="recup(this.id)"/>
<input name="203" type="text" id="203" size="10" onFocus="recup(this.id)"/>
<input name="303" type="text" id="303" size="10" onFocus="recup(this.id)"/>
</p></FORM>
</body>
</html>
Messages postés
39021
Date d'inscription
mercredi 11 avril 2007
Statut
Modérateur
Dernière intervention
22 septembre 2020
8 527