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)
A la ligne 62, se trouve le champ unique (qui marche très bien)
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>
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
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...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 //document.activeElement.innerHTML+=element.innerHTML; document.getElementById("content").value+=element.innerHTML
Quelqu'un aurais une idée à me proposer ?
Merci d'avance.
Partager