Pavé numérique virtuel

Marsh Posté le 28-01-2007 à 23:24:24

Bonsoir à toutes et tous, je viens à vous après des jours de recherches infructueuses !
Je voudrais savoir si c'est possible de faire un pavé numérique virtuel (en javascript ou autre) qui me permette de l'utiliser sur différents champs texte et pas seulement dans une zone prédéfinie (comme une calculette).
Le but, c'est l'utilisation sur un tablet PC mais le clavier virtuel du tablet gêne la visu du logiciel, donc je voudrais trouver ou faire un clavier juste avec les chiffres (même pas les opération ... on s'en fout là !) pour que ce soit utilisable avec le stylet.
Je précise que je n'en ai besoin que sur une seule page (donc besoin de popup permanent qui dialogue avec d'autres fenetres ou autre !), mais le nombre de champs à remplir est variable et dynamique.
Si quelqu'un pouvait m'aiguiller ça serait tres sympa.
Je désespère un peu là

Merci d'avance.

Reply

Marsh Posté le 28-01-2007 à 23:24:24

Reply

Marsh Posté le 29-01-2007 à 18:09:02

Ok vous cassez pas j'ai trouvé ... merci !

Reply

Marsh Posté le 29-01-2007 à 22:45:35

ta pas envie de parler de la solution au cas ou sa peut interesser ? ...

Reply

Marsh Posté le 30-01-2007 à 16:40:02

Ben j'hésite un peu ... bon ok, c'est bien parce que je suis gentil

Voila le code, il suffit de générer les champs texte en php :

Code :

<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)
{
// pour entrer le numéro sur lequel on vient de taper
if(this.indice < 11)
{
activeinput.value += this.innerHTML;
}
// pour effacer le dernier caractere
if(this.indice == 11)
{
activeinput.value = activeinput.value.substr(0,activeinput.value.length-1);
}
// pour tout effacer
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>
</html>

et merci à SpaceFrog du forum developpez.com !

Reply

Pavé numérique virtuel

Sujets relatifs:

Leave a Replay