Clavier virtuel et formulaire
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:
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é :cry:
Zoom dessus
Code:
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.
