Pavé numérique virtuel

Version imprimable

Voir 40 message(s) de cette discussion en une page

29/01/2007, 15h30
Kahlyv

Pavé numérique virtuel

Bonjour, c'est mon premier post parmis vous ... j'espère que ça fera pas trop mal !!!! :P
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 ;)
29/01/2007, 15h36
SpaceFrog

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é ...

vite fait ça pourrait ressembler à ça :

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
<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>

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

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
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>

29/01/2007, 16h39
SpaceFrog

pour l'esthétique on peut rajouter

Code:

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

dans le populate
29/01/2007, 17h04
Kahlyv

Bah merci c sympa ... je décortique tout ça pour comprendre mieux :mouarf:
Merci bien ;)
29/01/2007, 17h07
SpaceFrog

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 ...
29/01/2007, 17h31
Kahlyv

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 ! :P
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 !!!!! :mouarf:
30/01/2007, 08h42
SpaceFrog

:D
bienvenue dans un vrai forum d'entraide de developpeurs :mouarf:
31/01/2007, 08h09
Kahlyv
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:

1 2 var tdcollection = document.getElementsById('pave')[0].getElementsByTagName('td');
alors que c'était ça :
Code:

1 2 var tdcollection = document.getElementById('pave').getElementsByTagName('td');
Je commence à piger le coup avec ton exemple SpaceFrog ;)

Merci, à bientôt.
31/01/2007, 08h32
SpaceFrog

heu j'ai pas compris la question ?

à partir du moment ou l'element qui prend le focus passe dans la variable element actif ...
31/01/2007, 09h04
Kahlyv

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 ;)
31/01/2007, 09h23
SpaceFrog

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
31/01/2007, 09h26
Kahlyv

Donc si je comprends bien, ça peut marcher avec getElementsByTagName à condition de savoir à quel indice correspond mon table du pavé numérique ?
31/01/2007, 09h49
SpaceFrog

exactement !
31/01/2007, 11h10
Kahlyv

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] ?
31/01/2007, 13h05
SpaceFrog

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 ... ???
31/01/2007, 15h48
Kahlyv

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 !!??
31/01/2007, 15h57
SpaceFrog

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 ?
31/01/2007, 16h17
Kahlyv

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
31/01/2007, 17h07
SpaceFrog

tu as plusieurs pavés numériques ???

encore une fois pas besoin de savoir avec getElementBy ...
puisque dasn le onclick tu as this.innerHTML
31/01/2007, 19h48
Kahlyv

je pense que mon incompréhension viens de l'utilité du innerHtml ... ça fait quoi ça au juste ?
01/02/2007, 08h49
SpaceFrog

innerHTML c'est le contenu de la balise ...
01/02/2007, 09h38
Kahlyv

Ah ok donc this.innerHtml renverra le contenu de la cellule de table où je viens de cliquer ?
C'est pour ça que tu me dis que le getElement ne sert pas à sélectionner la cellule ?
Mais alors du coup il sert à quoi ce getElement ?

je crois que tu confonds deux choses.. la focnction qui vient mettre des onmouseover, onmouseout et onclick sur les cellules du tableau
et
la focntion du onclik des cellules qui ajoute le contenu aux inputs

en fait àprès la fonction qui construit les onclik du tableau c'est comme si tu avais:
Code:

1 2 3 <td onmousedown="this.calssName='down'"; onmouseup="this.className='up'" onclick="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=""}">7</td>
mais au lieu de l'ecrire pour chaque td j'ai fait un code qui le fait pour moi ...

08/11/2013, 10h35
kevdanone

bonjour j'aimerai savoir si il est possible d'adapter le clavier numérique tu as crée sans utiliser de table mais des li a la place? je suppose que l'adaptation est a faire dans la fonction js mais je suis débutant en js ^^"
08/11/2013, 10h39
SpaceFrog

Oulà , beau déterrage ...

remplacer le table par un ul et des li est tout a fait possible, cela ne relève pas de js mais de css ...
definir le width des li le mettre en inline bloc et float left et coller un clear both en, bout de ligne ...
08/11/2013, 10h47
kevdanone

oui déterrage de très loin désoler ^^ .

oui j'ai déjà fais la mise en forme dans le css sans soucis ^^ mais j'ai essayer de remplacer

Code:

tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')

par

Code:

tdcollection=document.getElementsByTagName('ul').getElementsByTagName('li')

mais ca ne fonctionne pas :s
08/11/2013, 10h58
SpaceFrog

Citation:

oui déterrage de très loin désoler ^^ .

Non, au contraire, c'est tout à ton honneur ça montre que tu as bien recherché sur nos forums

Peux tu nous montrer ton code actuel html css et js ... ?

html: (mon lu a une partie en buttons pour tester les 2 et biensure une seul des deux solution restera ^^")

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
<html>
<head>
    <meta charset="UTF-8">
    <title>Bienvenue sur restApp</title>
    <link rel="stylesheet" href="css/screen.css" media="screen, projection" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
 
<script type='text/javascript'>
var activeinput
 
function populateTd(){
var tdcollection=document.getElementsByTagName('ul').getElementsByTagName('li')
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>
 
<body onload='populateTd()'>
	<!-- LOGO -->
	<header>
		<img src="img/logoHeader.jpg"/>
	</header>
		<nav>
			<ul>
				<li><a class="select" href="index.html">Caisse</a></li>
				<li><a href="serveurs.html">Serveurs</a></li>
				<li><a href="chiffres.html">Chiffres</a></li>
			</ul>
		</nav>
	<section id="espece">
		<div>
			<div>
				<ul id="calculette">
 
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li><input type="button" value="1" /></li>
					<li><input type="button" value="2" /></li>
					<li><input type="button" value="3" /></li>
					<li><input type="button" value="C" /></li>
					<li><input type="button" value="0" /></li>
					<li><input type="button" value="." /></li>
				</ul>
			</div>
			<div>
				<ul id="info">
					<li>Total a payer: </li>
					<li>300€</li>
					<li>Espèce: </li>
					<li><input type='text' onfocus="activeinput=this" /></li>
					<li>A rendre: </li>
					<li>0.50€</li>
				</ul>
			</div>
			<div>	
				<a href="#">Annuler</a>
				<a href="#">Valider</a>
			</div>
 
		</div>
	</section>
</body>
</html>

et la partie de css qui est utliser (c'est encore en travaux XD )

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// ---------------------------------------------------------------------------
// Imports
 
@import "base";
@import "compass/reset";
@import "compass";
 
/* -------------------------------------------------------------------------*/
/* Layout */
 
$saumon:  #f5edd6;
$marron: #412114;
$rouge: #d23129;
 
body{
width: 90%;
  @include container;
  @include susy-grid-background;
  background-color: $saumon;
  font-family: Arial;
 
  header{
  @include span-columns($total-columns , $total-columns);
 
	  img{
	  	@include span-columns(3 , $total-columns);
	  	margin-top: 0.2em;
	  }
  }
  nav{
  	@include span-columns(6 omega , $total-columns);
	  ul{
	  	@include span-columns(6 omega , 6);
		  li{
		  	@include span-columns(2 , 6);
		  	@include box-sizing(border-box);
		  	display: inline-block;
		  	font-size: 3em;
		  	text-align: center;
 
		  	a{
		  		@include box-sizing(border-box);
		  		padding: 0.2em 0.2em 0 0.2em; 
		  		border-radius: 0.5em 0 0 0 ;
		  		text-decoration: none;
		  		background-color: $rouge;
		  		color: $saumon;
		  		&:hover{
		  			background-color: $marron;
		  		}
 
		  	}
		  	a.select{
		  		background-color: $marron;
		  	}
		  }
		}
	}
#espece{
		> div{
			@include span-columns(12, $total-columns);
			@include box-sizing(border-box);
			margin: 1em;
			height: 27em;
			padding: 1em;
 
			#calculette{
					@include pre(2 , $total-columns);
					@include span-columns(3 ,$total-columns );
					li{
					  	@include span-columns(1 ,3 );
					  	@include box-sizing(border-box);
					  	background-color:$rouge; 
					  	display: inline-block;
					  	font-size: 2em;
					  	font-weight: bold;
					  	text-align: center;
					  	width: 3em;
					  	height: 3em;
					  	margin:0.1em;
					  	input{
					  		width: 100%;
					  		height: 100%;
					  	}
 
				  	}
		  	}
		  	#info{
 
		  		@include span-columns(2,$total-columns);
		  		width: 20em;
		  		margin
		  		li{
		  			@include span-columns(1 ,2 );
					@include box-sizing(border-box);
					display: inline-block;
					font-size: 1em;
					height: 1.6em;
					width: 10em;
					margin-top: 1em;
					input{
						width: 50%;
					}
 
		  		}
		  	}
			a{
				@include box-sizing(border-box);
				@include span-columns(1 ,2 );
				@include box-sizing(border-box);
				display: inline-block;
				width: 8em;
				height:6em;
				font-weight: bold;
				font-size: 1.2em;
				padding-top:2.5em;
				text-align: center;
				margin-top: 2em;
				background-color: $rouge;
				color: $saumon;
				text-decoration: none;
				&:hover{
		  			background-color: $marron;
		  		}
			}
		}
	}
}

je reprécise que c'est en travaux ^^

08/11/2013, 11h24
Bovino

Code:

document.getElementsByTagName('ul').getElementsByTagName('li')

La méthode getElementsByTagName() s'applique à un élément et renvoie une collection.
Il n'est donc pas possible de faire ce type de chainage.
D'autant plus qu'un li étant placé dans un ul, ça n'a pas vraiment d'utilité...
08/11/2013, 11h28
kevdanone

ok donc le problème viens bien du script js et c'est ce que j'aimerai corriger :D
08/11/2013, 11h41
SpaceFrog

http://codepen.io/anon/pen/jmHkA
08/11/2013, 11h48
SpaceFrog

Sinon en restant sur getElementsByTagName

Code:

document.getElementsByTagName('ul')[0].getElementsByTagName('li')

encore faut il que ce soit le premier de la page ...

j'ai bien modifier le script js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type='text/javascript'> var activeinput function populateLi(){ var licollection=document.getElementsById('calculette').getElementsByName('li') for (i=0;i<licollection.length;i++){ licollection[i].onclick=function(){if (!!activeinput){ activeinput.value+=this.innerHTML; }} } } </script>
charger la méthode dans le body

Code:

<body onload='populateLi()'>

et rajouter

Code:

cursor:pointer;

dans le css mais ca ne fonctionne pas :s ai je oublier quelque chose?

08/11/2013, 12h39
SpaceFrog

mon code ...

Code:

licollection=document.getElementById('calculette')

ton code

Code:

licollection=document.getElementsById('calculette')

cherche la différence ...
08/11/2013, 12h45
kevdanone

lol en effet le petit "s" qui fait tache et que je viens de corriger mais toujours rien :s
08/11/2013, 12h54
SpaceFrog

as tu test mon code sur codepen ?
08/11/2013, 12h55
kevdanone

oui ton code sur codepen fonctionne très bien
08/11/2013, 13h00
SpaceFrog

et qu'en conclus tu ?

lien utile:
http://eric-pommereau.developpez.com...l-web/firebug/

Voir 40 message(s) de cette discussion en une page