Action Javascript: Simuler une touche clavier

Résolu

Clavier

Mikamadgik Messages postés 98 Statut Membre -
baladur13 Messages postés 47351 Date d'inscription Statut Modérateur Dernière intervention - 30 août 2013 à 17:51

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

Afficher la suite

1 réponse

Mikamadgik Messages postés 98 Statut Membre 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>

baladur13 Messages postés 47351 Date d'inscription Statut Modérateur Dernière intervention 14 400

Bonjour
A toutes fins utiles ==> https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/
0

Action Javascript: Simuler une touche clavier

1 réponse

Discussions similaires

Newsletters