Autoriser la saisie de chiffres uniquement dans un champ texte

Version imprimable

06/07/2009, 18h53
winzy77

Autoriser la saisie de chiffres uniquement dans un champ texte
Bonjour,

Je souhaite empêcher la saisie de lettres et de tout caractère qui ne soit pas un chiffre dans un champs texte. Le contrôle doit être effectué du côté client avant l'envoi du formulaire.
Code:

1 2 3 <label for="montant">Montant</label> <input name="montant" id="montant" type="text" size="10" /> <i>exemple : 5626</i>
Le montant est un entier et sera toujours un entier.

Auriez-vous une solution simple à utiliser sachant que je suis débutant en JavaScript ?

Merci d'avance

Je viens de trouver la réponse à mon problème.

Pour ceux que ça intéresserait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script language="Javascript">
function verif_nombre(champ)
  {
	var chiffres = new RegExp("[0-9]");
	var verif;
	var points = 0;
 
	for(x = 0; x < champ.value.length; x++)
	{
            verif = chiffres.test(champ.value.charAt(x));
	    if(champ.value.charAt(x) == "."){points++;}
            if(points > 1){verif = false; points = 1;}
  	    if(verif == false){champ.value = champ.value.substr(0,x) + champ.value.substr(x+1,champ.value.length-x+1); x--;}
	}
  }
</script>

... et dans l'input

Code:

onkeyup="verif_nombre(this);"

23/07/2010, 11h25
robertjul

Merci beaucoup! C'est exactement se que je cherchais!
Bonne journée
21/08/2013, 10h39
Jasou

Très pratique
Merci :)

Une autre façon de voir :

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
<script type="text/javascript">
function akChk(winEvent){ 
var code;
window.event
    if(!winEvent) {
        winEvent = window.event;
        code = winEvent.keyCode;
    }
    else { // ff
        code = winEvent.which;
    }
valeur=document.getElementById('zone').value
re=false
if ( code>=96 && code<=105){ re=true; }
if (code==109 && (valeur.length==0)){re=true;}
if (code==45 && (valeur.length==0)){re=true;}
if (code==188 && valeur.indexOf(',')==-1 && valeur.length>0 && valeur!="-"){re=true;}
winEvent.returnValue=re
} 
</script>
 
</head>
<body >
<input type='text' id ="zone" onkeydown="akChk()" />
</body>
</html>

:salut:
Un exemple en HTML5 pour saisir exactement 8 chiffres :

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
<!doctype html>
<html lang="fr">
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=9">
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="YES">
<title>Verification de votre CIN avec 8 chiffres exactement en HTML5 by Hackoo</title>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.gday.net.au/A.table_formatting.css+form_formatting.css,Mcc.oypwx3VI42.css.pagespeed.cf.2v-c6vAqSE.css"/>
<meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<style>
        body{
          background-image: url(background.png);
          font-family: 'Open Sans',sans-serif;
          font-weight: 400;
          font-size: 13px;
     }
 
        :invalid {
          background-color: #F0DDDD;
          border-color: #e88;
          -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
          -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          box-shadow:0 0 5px rgba(255, 0, 0, .8);
       }
 
        :required {
          border-color: #88a;
          -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          box-shadow: 0 0 5px rgba(0, 0, 255, .5);
        }
 
        form {
          width:300px;
          margin: 20px auto;
        }
 
        input {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          border:1px solid #ccc;
          font-size:20px;
          width:300px;
          min-height:30px;
          display:block;
          margin-bottom:15px;
          margin-top:5px;
          outline: none;
 
          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          -o-border-radius:5px;
          -ms-border-radius:5px;
          border-radius:5px;
        }
 
        input[type=submit] {
          background:none;
          padding:10px;
          cursor: pointer;
          }
        
        label{
          cursor: pointer;
          }
        
    </style>
<body>
<center><form method="POST" action="#">
<p><h1><b>CIN :</b></h1> <input type="text" placeholder="Tapez dans ce champ 8 chiffres" autofocus required pattern="(\d){8}" name="CIN" title="Tapez dans ce champ 8 chiffres exactement !"></p><span><input type="submit"></span>
</form>
</body>
</html>

28/08/2018, 23h36
AmeryCourtz

plus simple

En plus simple avec l'attribut pattern dans html5.

Code:

<input type="text" pattern="[0-9]{8}" />
29/08/2018, 00h50
Beginner.

Oui effectivement c'est intéressant mais il y a aussi la possibilité d'utiliser directement un input de type "number"...