Clavier virtuel et formulaire

**Clorge** · 09/02/2013, 19h22

Hello world,

J'ai codé en HTML/CSS/JavaScript/PHP un clavier virtuel (ça permet d'écrire avec simplement la souris)
Il marche parfaitement quand je lui demande de rentrer le texte dans un unique champ, mais je bloque sur son utilisation au sein d'un formulaire contenant plusieurs champs.

Voilà mon code (la sortie est dégeu à cause de php)

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
 
<!DOCTYPE html>
<html>
	<head>
		<title>Clavier virtuel</title>
		<style type="text/css">
			.case
			{
				width: 50px;
				height: 50px;
				background-color: green;
				display:inline-block;
				cursor:pointer;
			}
			.case:hover
			{
				color:white;
				border: 2px solid red;
			}
			.tab
			{
				width:16px;
				display:inline-block;
			}
		</style>
		<script>
			function change_etat(caractere)
			{
				var chaine_a = 'azertyuiopqsdfghjklmwxcvbn';
				var chaine_b = chaine_a.toUpperCase();
 
				if(chaine_a.indexOf(caractere)!=-1)
				{
					return caractere.toUpperCase();
				}
				if(chaine_b.indexOf(caractere)!=-1)
				{
					return caractere.toLowerCase();
				}
				return caractere;
			}
			function abc(element)
			{
				//document.activeElement.innerHTML+=element.innerHTML;
				document.getElementById("content").value+=element.innerHTML;
			}
			function change_etat_all()
			{
				var array = document.querySelectorAll(".case");
				var longueur=array.length;
 
				for(var abc=0;abc<longueur;abc++)
				{
					array[abc].innerHTML=change_etat(array[abc].innerHTML);
				}
			}
			</script>
	</head>
	<body>
 
 
	<div id="test"></div>
	<input id="content" />
	<input id="a" />
	<input id="b" />
	<input id="c" />
	<input id="d" />
 
<div id="clavier_virtuel"><div class='case' onclick='change_etat_all();'>verr</div><table><tr><td><div class="case" onselect="return false;" onclick="abc(this);">a</div><div class="case" onselect="return false;" onclick="abc(this);">z</div><div class="case" onselect="return false;" onclick="abc(this);">e</div><div class="case" onselect="return false;" onclick="abc(this);">r</div><div class="case" onselect="return false;" onclick="abc(this);">t</div><div class="case" onselect="return false;" onclick="abc(this);">y</div><div class="case" onselect="return false;" onclick="abc(this);">u</div><div class="case" onselect="return false;" onclick="abc(this);">i</div><div class="case" onselect="return false;" onclick="abc(this);">o</div><div class="case" onselect="return false;" onclick="abc(this);">p</div><br />
<div class="tab"></div><div class="case" onselect="return false;" onclick="abc(this);">q</div><div class="case" onselect="return false;" onclick="abc(this);">s</div><div class="case" onselect="return false;" onclick="abc(this);">d</div><div class="case" onselect="return false;" onclick="abc(this);">f</div><div class="case" onselect="return false;" onclick="abc(this);">g</div><div class="case" onselect="return false;" onclick="abc(this);">h</div><div class="case" onselect="return false;" onclick="abc(this);">j</div><div class="case" onselect="return false;" onclick="abc(this);">k</div><div class="case" onselect="return false;" onclick="abc(this);">l</div><div class="case" onselect="return false;" onclick="abc(this);">m</div><br />
<div class="tab"></div><div class="tab"></div><div class="case" onselect="return false;" onclick="abc(this);">w</div><div class="case" onselect="return false;" onclick="abc(this);">x</div><div class="case" onselect="return false;" onclick="abc(this);">c</div><div class="case" onselect="return false;" onclick="abc(this);">v</div><div class="case" onselect="return false;" onclick="abc(this);">b</div><div class="case" onselect="return false;" onclick="abc(this);">n</div><br />
</td><td><div class="case" onselect="return false;" onclick="abc(this);">7</div><div class="case" onselect="return false;" onclick="abc(this);">8</div><div class="case" onselect="return false;" onclick="abc(this);">9</div><br />
<div class="case" onselect="return false;" onclick="abc(this);">4</div><div class="case" onselect="return false;" onclick="abc(this);">5</div><div class="case" onselect="return false;" onclick="abc(this);">6</div><br />
<div class="case" onselect="return false;" onclick="abc(this);">1</div><div class="case" onselect="return false;" onclick="abc(this);">2</div><div class="case" onselect="return false;" onclick="abc(this);">3</div><br />
</td></tr><tr><td><div class="case" onselect="return false;" onclick="abc(this);">!</div><div class="case" onselect="return false;" onclick="abc(this);">"</div><div class="case" onselect="return false;" onclick="abc(this);">#</div><div class="case" onselect="return false;" onclick="abc(this);">$</div><div class="case" onselect="return false;" onclick="abc(this);">%</div><div class="case" onselect="return false;" onclick="abc(this);">&</div><div class="case" onselect="return false;" onclick="abc(this);">'</div><div class="case" onselect="return false;" onclick="abc(this);">(</div><div class="case" onselect="return false;" onclick="abc(this);">;</div><div class="case" onselect="return false;" onclick="abc(this);"><</div><div class="case" onselect="return false;" onclick="abc(this);">=</div><br />
<div class="case" onselect="return false;" onclick="abc(this);">)</div><div class="case" onselect="return false;" onclick="abc(this);">*</div><div class="case" onselect="return false;" onclick="abc(this);">+</div><div class="case" onselect="return false;" onclick="abc(this);">,</div><div class="case" onselect="return false;" onclick="abc(this);">-</div><div class="case" onselect="return false;" onclick="abc(this);">.</div><div class="case" onselect="return false;" onclick="abc(this);">/</div><div class="case" onselect="return false;" onclick="abc(this);">:</div><div class="case" onselect="return false;" onclick="abc(this);">></div><div class="case" onselect="return false;" onclick="abc(this);">?</div><div class="case" onselect="return false;" onclick="abc(this);">@</div><br />
<div class="case" onselect="return false;" onclick="abc(this);">[</div><div class="case" onselect="return false;" onclick="abc(this);">\</div><div class="case" onselect="return false;" onclick="abc(this);">]</div><div class="case" onselect="return false;" onclick="abc(this);">^</div><div class="case" onselect="return false;" onclick="abc(this);">_</div><div class="case" onselect="return false;" onclick="abc(this);">`</div><div class="case" onselect="return false;" onclick="abc(this);">{</div><div class="case" onselect="return false;" onclick="abc(this);">|</div><div class="case" onselect="return false;" onclick="abc(this);">}</div><div class="case" onselect="return false;" onclick="abc(this);">~</div><br />
</td></tr></table></div>	</body>
</html>

A la ligne 62, se trouve le champ unique (qui marche très bien)
et les quatres lignes suivantes sont les champs que j'aimerais remplir

A la ligne 44, se trouve l'instruction js qui fait le travail et à la ligne 43 la tentative raté

Zoom dessus

Code :

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

1
2
3
 
//document.activeElement.innerHTML+=element.innerHTML;
document.getElementById("content").value+=element.innerHTML

Je sais que le problème vient du focus (qui est pris par le button lors du clic et que quand la fonction se lance, c'est le button qui est la cible) mais j'ignore comment corriger ça...

Quelqu'un aurais une idée à me proposer ?
Merci d'avance.

**NoSmoking** · 10/02/2013, 10h06

Bonjour,
sur le focus de tes différents INPUT tu initialises une variable, objetEnCours par exemple, et c'est l'INPUT pointé par celle ci que tu modifies.

Voilà mon code (la sortie est dégeu à cause de php)

PHP ne fait que ce qu'on lui demande

**sekaijin** · 10/02/2013, 13h09

Envoyé par NoSmoking

Envoyé par Clorge

Voilà mon code (la sortie est dégeu à cause de php)

PHP ne fait que ce qu'on lui demande

Pourquoi le code javascript n'est pas dans un fichier js ?
A+JYT

**Clorge** · 10/02/2013, 16h38

@NoSmoking j'y ai pensé mais ça fait un peu dégeu.. surtout si je vais mettre mon focus dans un champ qui n'ai pas prévu et que quand je clique, le contenu se met ailleurs...

@sekaijin c'est du tests, inutile de faire deux fichiers pour si peu :p