Pavé numérique virtuel

**Kahlyv** · 29/01/2007, 15h30

Bonjour, c'est mon premier post parmis vous ... j'espère que ça fera pas trop mal !!!!

Plus sérieusement, voici ma question : j'ai actuellement une page php avec un nombre de champs texte (input type=text ou textarea) variable puisque générés dynamiquement, et je voudrais un coup de main pour trouver ou créer un pavé numérique virtuel, placé dans un coin mais qui fonctionne quel que soit le champ texte sélectionné.
En fait, ça se passe sur un tablet PC, mais le clavier virtuel de windows tablet ed prend trop de place, d'autant plus que nous n'avons besoin que des chiffres et le point (ou virgule).
Quelqu'un aurait-il un lien, une idée ou au moins le principe ?
Merci d'avance pour votre aide

**SpaceFrog** · 29/01/2007, 15h36

un pavé numérique de saisie sur clikc de la souris et qui viendrait renseigner le champs selectionné ?

suffit d'avoir dasn une variable gloable le champs selectionné et de le passer en paramètre au pavé ...

**SpaceFrog** · 29/01/2007, 15h55

vite fait ça pourrait ressembler à ça :

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
<style type='text/css'>
td {cursor:hand;}
.up {	border: outset 2 px gray;
		height:20px;
		width:20px;
		font-family:verdana;
		text-align:center;
}
 
.down {border: inset 2 px gray;
		height:20px;
		width:20px;
		font-family:verdana;
		text-align:center;
}
</style>
 
<script type='text/javascript'>
var activeinput
 
function populateTd(){
var tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
for (i=0;i<tdcollection.length;i++){
		tdcollection[i].className='up'
		tdcollection[i].onmousedown=function(){this.className='down'}
		tdcollection[i].onmouseup=function(){this.className='up'}
		tdcollection[i].onclick=function(){if (!!activeinput){activeinput.value+=this.innerHTML}}
		}
		}
 
 
</script>
 
<title>Nouvelle page 1</title>
</head>
 
<body onload='populateTd()'>
<table>
<tr>
	<td>7</td>
	<td>8</td>
	<td>9</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td colspan=2>0</td>
	<td>.</td>
</tr>
</table>
 
<br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
<input type='text' onfocus="activeinput=this" /><br/>
 
</body>

**SpaceFrog** · 29/01/2007, 16h06

avec un petit bonus pour l'input actif ...
un clear Error et clear all

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
 
<style type='text/css'>
td {cursor:hand;}
.up {	border: outset 2 px gray;
		height:20px;
		width:20px;
		font-family:verdana;
		text-align:center;
}
 
.down {border: inset 2 px gray;
		height:20px;
		width:20px;
		font-family:verdana;
		text-align:center;
}
</style>
 
<script type='text/javascript'>
var activeinput
 
function populateTd(){
var tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
for (i=0;i<tdcollection.length;i++){
		tdcollection[i].indice=i
		tdcollection[i].className='up'
		tdcollection[i].onmousedown=function(){this.className='down'}
		tdcollection[i].onmouseup=function(){this.className='up'}
		tdcollection[i].onclick=function(){if (!!activeinput){ if(this.indice<11){activeinput.value+=this.innerHTML;}
		                                                       if(this.indice==11){activeinput.value=activeinput.value.substr(0,activeinput.value.length-1)}
		                                                       if(this.indice==12){activeinput.value=""}
		                                                       }
		                                    }
 
		}
	}
 
function highlightActive(obj){
var inputcollection=document.getElementsByTagName('input')
for(i=0;i<inputcollection.length;i++){
 
 	    inputcollection[i].style.backgroundColor=(inputcollection[i]==obj)?"lime":"white"
 	    }
 	    }		
 
</script>
 
<title>Pavé numérique</title>
</head>
 
<body onload='populateTd()'>
<table>
<tr>
	<td>7</td>
	<td>8</td>
	<td>9</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td colspan=2>0</td>
	<td>.</td>
</tr>
<tr>
	<td colspan=2>CE</td>
	<td>CA</td>
</tr>
</table>
 
<br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
<input type='text' onfocus="highlightActive(this);activeinput=this" /><br/>
 
</body>

**SpaceFrog** · 29/01/2007, 16h39

pour l'esthétique on peut rajouter

Code :

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

tdcollection[i].onselectstart=function(){return false;}

dans le populate

**Kahlyv** · 29/01/2007, 17h04

Bah merci c sympa ... je décortique tout ça pour comprendre mieux

Merci bien

**SpaceFrog** · 29/01/2007, 17h07

si tu as besoin d'explications n'hésites pas ...

le principe est simple une varibale globale qui en fait rend "actif" le dernier inout qui aura reçu le focus ...
celui ci est ensuite rempli sur le onclik des td ...
une touche efface dernière entrée et une touche efface l'input, un peu de décoration autour ...

**Kahlyv** · 29/01/2007, 17h31

OK OK ben c'est super tout ça ... et en plus c'est clair et j'ai compris, c'est dire si t'es super ^^
Quand je sera grand, je voudra être comme toi !

Merci beaucoup ....
[mode je casse du sucre !!! = on]
c'est marrant quand même que personne n'aie été foutu de m'aider sur hardware.fr (3 posts et pas une seule réponse ... même pas un encouragement !) alors que ce n'était pas si compliqué quand on connait un peu
[mode je casse du sucre !!! = off]
Je suis un peu méchant là mais ça me gonfle car ça fait un bail que j'ai posté et toujours rien.

Enfin c'est tout à ton honneur SpaceFrog et à celui du forum developpez.com qui me reverra surement plus souvent maintenant

On mange bien chez vous !!!!!

**SpaceFrog** · 30/01/2007, 08h42

bienvenue dans un vrai forum d'entraide de developpeurs

**Kahlyv** · 31/01/2007, 08h09

Je reviens pour une 2eme question liée à la première.
Le code fonctionne super bien, mais comment ça se passe si mon tableau qui contient le pavé se trouve dans d'autres tableaux ?
J'ai tenté des choses avec getElementById en mettant un id à mon tableau de pavé, mais c'est pas très fructueux !

Excuse moi j'ai rien dis ... je viens de trouver ^^
J'avais mis ça :

Code :

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

1
2
 
var tdcollection = document.getElementsById('pave')[0].getElementsByTagName('td');

alors que c'était ça :

Code :

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

1
2
 
var tdcollection = document.getElementById('pave').getElementsByTagName('td');

Je commence à piger le coup avec ton exemple SpaceFrog

Merci, à bientôt.

**SpaceFrog** · 31/01/2007, 08h32

heu j'ai pas compris la question ?

à partir du moment ou l'element qui prend le focus passe dans la variable element actif ...

**Kahlyv** · 31/01/2007, 09h04

ben au début il y avait getElementsByTagName mais il me trouvait pas le bon tableau paske j'en ai plusieurs
donc avec getElementById et en mettant un id à mon tableau de pavé num il repère le tableau en question, puis les td à l'intérieur
disons qu'avant ça marchait mal, et maintenant ça marche bien ^^
mais c'est grace à ton exemple

**SpaceFrog** · 31/01/2007, 09h23

oui id DOIT être unique sur la page...
getElementById('xx') te retourne un objet unique...

le name peut etre multiple

getElementsByName('xx') te retoune une collection
getElementsByName('xx') [0] est le premier element de la collection

les tag aussi peuvent bien entendu être plusieurs identiques sur la page
getElementsByTagName('xx') te retoune une collection
getElementsByTagName('xx') [0] est le premier element de la collection

**Kahlyv** · 31/01/2007, 09h26

Donc si je comprends bien, ça peut marcher avec getElementsByTagName à condition de savoir à quel indice correspond mon table du pavé numérique ?

**SpaceFrog** · 31/01/2007, 09h49

exactement !

**Kahlyv** · 31/01/2007, 11h10

alors juste pour etre sûr d'avoir bien compris !
je passe les tr et td pour aller plus vite

<table>
<table>
<table>

</table>
</table>
</table>

le 3eme table qui est au milieu sera à getElementsByTagName('table')[2] ?

**SpaceFrog** · 31/01/2007, 13h05

ouf en 2 phrase tu m'a laché ...
heu c'est quoi ces tables imbriquées ???

et a priori pas besoin de mettre la main sur l'elemnt avec getElement puisque l'element se designe tout seul avec this ... ???

**Kahlyv** · 31/01/2007, 15h48

bon ok c'est peut etre pas tres clair :p
en faite c'était pour illustrer mon cas : j'ai plusieurs tables imbriquées et si je veux lui dire que la table concernée est la 3eme, je vais la chercher en faisant getElementsByTagName('table')[2] ... mais j'ai peut etre rien compris du tout en fin de compte :p
d'autre part, l'envoi du this est fait pour les input, mais pas pour les tables !!??

**SpaceFrog** · 31/01/2007, 15h57

table concernée pour quoi ?
tu as besoin de savoir quel est l'inout ou le textarea concerné ...
à moins que ce ne soit pour autre chose ?

**Kahlyv** · 31/01/2007, 16h17

ben table concernée pour savoir ou est-ce je viens de cliquer pour savoir quoi afficher dans l'input sélectionné !
pour moi le getElementsByTagName permettait de savoir où on a cliqué dans le tableau

Pavé numérique virtuel

JavaScript

Discussions similaires

Partager

Partager