Autoriser la saisie de chiffres uniquement dans un champ texte

**winzy77** · 06/07/2009, 18h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**winzy77** · 06/07/2009, 19h30

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

Pour ceux que ça intéresserait :

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

Sélectionner tout - Visualiser dans une fenêtre à part

onkeyup="verif_nombre(this);"

**robertjul** · 23/07/2010, 11h25

Merci beaucoup! C'est exactement se que je cherchais!
Bonne journée

**Jasou** · 21/08/2013, 10h39

Très pratique
Merci

**SpaceFrog** · 21/08/2013, 10h52

Une autre façon de voir :

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

**hackoofr** · 21/08/2013, 11h02

Un exemple en HTML5 pour saisir exactement 8 chiffres :

Code HTML :

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

**AmeryCourtz** · 28/08/2018, 23h36

En plus simple avec l'attribut pattern dans html5.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" pattern="[0-9]{8}" />

**Beginner.** · 29/08/2018, 00h50

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

Autoriser la saisie de chiffres uniquement dans un champ texte

JavaScript

Discussions similaires

Partager

Partager