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

Pavé numérique virtuel

JavaScript

Vue hybride

Discussions similaires

Partager

Partager