fonction pour naviguer dans un tableau 2D et autres

**kreaseb** · 09/09/2010, 13h10

Bonjour à tous,

Je viens car j'ai un peu de mal à cerner la logique à adopter pour gérer ma fonction qui me semble pourtant simple.
Mise en situation:

-Un Clavier virtuel est créé, les touches de celui-ci ne sont accessibles qu'avec le pavé numérique, et la touche action se trouve être la touche "enter" (contraintes du projet).

-Lorsque je pianote sur mon clavier-V, le texte apparait dans un conteneur prévu à cet effet. Jusqu'ici pas de soucis; d'ailleurs aucun problème ne se pose lorsque l'on touche aux touches possédant un code ascii.

-Mon PB est le suivant, mon clavier est composé d'une touche "Lock"(maj/min), d'une autre "supprime", et d'une énième "enter". J'essaye de faire en sorte, dans un premier temps, que ma touche "Lock" face un switch de tableau et m'affiche le contenu d'un second (ex: tab[0][1] deviendrait tab[1][1]) mais je n'y parviens pas.

Voici le fichier js:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*ClavierURL2.js*/
 
var tabmin   = new Array('0','1','2','3','4','5','6','7','8','9','lo','a','z','e','r','t','y','u','i','o','p','Go','q','s','d','f','g','h','j','k','l','m','@','w','x','c','v','b','n','.',',',';',':','_','+','-','*','/','','?','!','%','enter');
var tabmaj  = new Array('0','1','2','3','4','5','6','7','8','9','lo','A','Z','E','R','T','Y','U','I','O','P','Go','Q','S','D','F','G','H','J','K','L','M','@','W','X','C','V','B','N','.',',',';',':','_','+','-','*','/','','?','!','%','enter');
/*  test non concluant  var tabAscii = new Array('48','49','50','51','52','53','54','55','56','57','lock','97','122','101','114','116','121','117','105','111','112','eff','113','115','100','102','103','104','106','107','108','10','64','119','120','99','118','98','110','46','44','59','58','95','43','45','42','47','32','63','33','37','enter');*/
var tabTot = new Array(tabmin,tabmaj);
var tabTexte = new Array();
 
 
 
 
function displayFocus(){
	var touches = document.getElementsByName("touche");
	var nbtouches= touches.length;
 
		for(var i=0;i<nbtouches;i++){
			if(i==focus){touches.item(i).className="toucheF";
					if(i==48){touches[i].className="touche_spaceF";}}
			else{touches.item(i).className="touche";
					if(i==48){touches[i].className="touche_space";}}
		}
 
	document.addEventListener("keydown",KeyCheck,false);
}
 
 
function touchesClavier(){
	var touches = document.getElementsByName("touche");
	nbtouches = touches.length;
		for (j=0 ;j<nbtouches ;j++){
		if(lock==0)	{touches[j].innerHTML = tabTot[0][j];}
		else		{touches[j].innerHTML = tabTot[1][j];}
		}
}
 
 
function KeyCheck(e){
 
	var adresse = document.getElementById("adresseURL");
	var touches = document.getElementsByName("touche");
	var nbtouches= touches.length;
	var keyID = (window.event) ? event.keyCode : e.keyCode;
 
		switch(keyID)
			{
			case 13:	//OK
					for(i=0;i<nbtouches;i++){
					if(i==focus){
								adresse.innerHTML = tabTot[lock][i];
								tabTexte.push(adresse.innerHTML);
								adresse.innerHTML =  tabTexte.join("");
 
 
 
								}
					}
 
					break;
 
			case 37:	//Arrow Left
					if  ( focus > 0 ) { focus-- ; } 
					break;
 
			case 39:	//Arrow Right
					if  ( focus < touches.length-1  ) { focus++;}
					break;
 
			case 38:	//Arrow Up
					break;
			case 40:	//Arrow Down
					break;
		}
	displayFocus()
}
 
window.onload=function(){
	focus=0;
	lock=0;
	touchesClavier();
	displayFocus()
}

Le HTML:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<link rel="stylesheet" type="text/css" href="clavierURL.css"/>
<script language="javascript" type="text/javascript" src="clavierURL2.js"></script>
</head>
<body>
 
<div id="champTexte"><div id="adresseURL"></div></div>
<div id="clavier">
 
<table border=0>
<tr class="espace_horiz">
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
</tr>
 
<tr class="espace_horiz">
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
 
</tr>
<tr class="espace_horiz">
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
</tr>
 
<tr class="espace_horiz">
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
</tr>
 
 
<tr class="espace_horiz">
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td colspan='5'id="touche_space" class="touche_space" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
<td class="espace"></td>
<td class="touche" name="touche"></td>
</tr>
</table>
</div>
 
 
 
</body>
</html>

Si vous avez la moindre piste n'hésitez pas.
Merci à vous

kréaséb

**Bovino** · 09/09/2010, 23h45

A priori, le keycode de la touche Lock du pavé numérique c'est 144 mais tu ne traites pas ce cas la...

**kreaseb** · 10/09/2010, 09h40

Merci pour cette réponse.
Oui en effet je ne traite pas de ce cas parce que finalement ça ne sert à rien dans ma situation. C'est aussi la raison pour laquelle mon tableau "tabAscii" est en commentaire.
à vrai dire tout va se jouer dans ma fonction KeyCheck. c'est ici que ej vais traiter les cas spéciaux comme le lock. Mais c'est à moi de lui attribuer sa fonction.
Ici nous avons un :

Code :

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

1
2
3
4
if(i==focus){
		adresse.innerHTML = tabTot[lock][i];
		tabTexte.push(adresse.innerHTML);
		adresse.innerHTML =  tabTexte.join("");

et je vais amené mon cas particulier en ajoutant un if et en ciblant directement la "touche" dans mon tableau :

Code :

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

if(i==10){ /*FAIRE LE SWITCH maj/min  min/maj*/}

Mais comme je le disais c'est ici que ça coince je ne me l'explique pas. J'y parviens avec 2 boutons distincts mais pas avec un seul.

Voila la situation.
Je reviens si je trouve une solution

kréaséb

**Bovino** · 10/09/2010, 09h53

Code :

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

if(i==focus)

Il ne faut pas donner comme nom de variable des noms de propriétés existantes ou des mots clés du langage !!!

**kreaseb** · 10/09/2010, 10h31

ok j'ai trouvé la solution.
Evidemment elle tient en une ligne !!

Bovino j'ai tenu compte de ta remarque et ai fais la modification.
Le focus (qui s'appel "cible" désormais) n'était pas à l'origine du problème, mais ça tu t'en doutais.

j'ai créé une fonction switchLock() dans laquelle j'ai mis 2 conditions maj/min et j'ai attribué la valeur 10 à "cible" dans mon KeyCheck et y ai intégré une condition Lock/pas Lock. Le script sera probablement plus claire:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/*ClavierURL2.js*/
 
var tabmin   = new Array('0','1','2','3','4','5','6','7','8','9','','a','z','e','r','t','y','u','i','o','p','Go','q','s','d','f','g','h','j','k','l','m','@','w','x','c','v','b','n','.',',',';',':','_','+','-','*','/','','?','!','%','enter');
var tabmaj  = new Array('0','1','2','3','4','5','6','7','8','9','','A','Z','E','R','T','Y','U','I','O','P','Go','Q','S','D','F','G','H','J','K','L','M','@','W','X','C','V','B','N','.',',',';',':','_','+','-','*','/','','?','!','%','enter');
 
var tabTot = new Array(tabmin,tabmaj);
var tabTexte = new Array();
 
 
function displaycible(){
	var touches = document.getElementsByName("touche");
	var nbtouches= touches.length;
 
for(var i=0;i<nbtouches;i++){
if(i==cible){touches.item(i).className="toucheF";
					if(i==48){touches[i].className="touche_spaceF";}}
			else{touches.item(i).className="touche";
					if(i==48){touches[i].className="touche_space";}}
		}
	document.addEventListener("keydown",KeyCheck,false);
}
 
 
 
function touchesClavier(){
	var touches = document.getElementsByName("touche");
	nbtouches = touches.length;
		for (j=0 ;j<nbtouches ;j++){
		touches[j].innerHTML = tabTot[0][j];
		}
}
 
function switchLock(){
var touches = document.getElementsByName("touche");
var nbtouches= touches.length;
if (lock==0){for (j=0 ;j<nbtouches ;j++){touches[j].innerHTML = tabTot[0][j];}};
if (lock==1){for (j=0 ;j<nbtouches ;j++){touches[j].innerHTML = tabTot[1][j];}};
}
 
 
 
function KeyCheck(e){
 
	var adresse = document.getElementById("adresseURL");
	var touches = document.getElementsByName("touche");
	var nbtouches= touches.length;
	var keyID = (window.event) ? event.keyCode : e.keyCode;
 
switch(keyID)
{
case 13:	//OK
					if(cible==10){if(lock==0){lock=1;}else{lock=0};}
	for(i=0;i<nbtouches;i++){
	if(i==cible){	adresse.innerHTML = tabTot[lock][i];
			tabTexte.push(adresse.innerHTML);
			adresse.innerHTML = tabTexte.join("");
		}
 
	}
break;
 
case 37:	//Arrow Left
	if  ( cible > 0 ) { cible-- ; } 
	break;
 
case 39:	//Arrow Right
	if  ( cible < touches.length-1  ) { cible++;}
	break;
 
case 38:	//Arrow Up
	break;
case 40:	//Arrow Down
	break;
}
	displaycible()
	switchLock()
}
 
window.onload=function(){
	cible=0;
	lock=0;
	touchesClavier();
	displaycible()
}

Merci du coup de main Bovino..

kréaséb

fonction pour naviguer dans un tableau 2D et autres

JavaScript

Discussions similaires

Partager

Partager