Pavé numérique pour smartphone

**turcan8** · 11/07/2014, 07h08

Bonjour,

je récupère ce script avec grand bonheur, sauf que :
1- je voudrais l'utiliser pour afficher un pavé numérique sur un smartphone ; jusque là tout va bien, j'ai rajouté un petit <meta name="viewport" content="width=device-width, height=device-height" />
2- je voudrais que la saisie s'affiche dans un seul champ (facile) sans que l'on soit obligé de donner manuellement le focus à ce champ (aïe)
3- je bidouille en php mais le java script m'est... totalement inconnu à ce jour !

Je suppose qu'une petite ligne bien placée par ceux qui savent doit résoudre mon misérable problème !

Envoyé par SpaceFrog

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** · 11/07/2014, 08h19

il existe un plugin jquery qui semble très paramètrable ...
http://keith-wood.name/keypad.html

et surtout bien documenté ...

Sinon avec Jquery UI
http://www.jquerybyexample.net/2012/...rd-plugin.html

**turcan8** · 12/07/2014, 09h12

Merci pour la piste jquery, ça faisait déjà un moment que je me disais qu'il fallait s'y mettre.
Sinon pour mon pb il y a une autre solution, hyperbasique, mais finalement il faut être honnête ça correspond à mon besoin : <input type="number" /> !!!

Merci pour le coup de main...

**thelvin** · 12/07/2014, 15h29

Envoyé par turcan8

Sinon pour mon pb il y a une autre solution, hyperbasique, mais finalement il faut être honnête ça correspond à mon besoin : <input type="number" /> !!!

C'est la première chose à laquelle j'ai pensé, mais il faut le reconnaître, il existe pas mal de navigateurs mobiles qui datent d'avant ce truc.

Pavé numérique pour smartphone

JavaScript

Discussions similaires

Partager

Partager