Ne permettre que la saisie d'un nombre entier dans un input

Version imprimable

25/09/2017, 18h19
joel.drigo

Ne permettre que la saisie d'un nombre entier dans un input
Salut,

J'essaye de faire un champ de saisie qui ne permette de saisir qu'un entier (ou plus précisément un entier relativement petit, donc pas de soucis de milliers ou de notation scientifique). Je voudrais simplement qu'on ne puisse pas saisir autre chose que des chiffres (et par saisie, j'entends au clavier, au clavier virtuel, par copier/coller..., par tout moyen de saisie en bref ), sans perdre ma saisie en cours parce que mon doigt ripe sur une touche qui n'est pas un chiffre.

J'ai donc créé un input comme suit (je simplifie en omettant id, classes, et tout le décorum) :

Code:

<input type="number" step=1>

(accessoirement, j'ai aussi des champs sous la forme <input type="number" step=1 min=0> et <input type="number" step=1 min=0 max=200> et le problème est le même)

Le soucis :
- sous Chrome, je peux saisir un point ou une virgule
- sous Edge, je peux saisir n'importe quoi (des lettres en particulier (!)) et, pire, si mon premier caractère n'est pas un chiffre, le placeholder ne disparaît pas mais se décale vers la droite !
Or, je ne veux pas qu'on saisisse autre chose qu'un nombre entier (ou rien, en laissant le champ vide, mais ça c'est une autre histoire que je verrais après).

Je me suis dit que j'allais ajouter un script sur événement qui vire les caractères indésirables (avec en arrière pensée le souci que ça risque de poser sur la position du curseur en cours de frappe, mais, pareil, pour l'instant je laisse ce problème de côté pour le moment). Donc, j'ai écrit (j'utilise JQuery) :

Code:

field.on('propertychange input', forceInteger);

avec
Code:

1 2 3 4 5 function forceInteger(e){ var $input = $(this); $input.val($input.val().replace(/\D+/g,'')); }
L’événement se déclenche bien et la fonction est exécutée. Le souci, c'est que
- dès que je tape un point :
  - sous Chrome, le champ se vide
  - sous Edge, ça fonctionne
- dès que je tape une virgule :
  - sous Chrome, la virgule reste affichée tant que je ne tape pas un autre chiffre après
  - sous Chrome, le champ se vide dès que je tape une virgule ou un point après
  - sous Edge, le champ se vide
- dès que je tape une lettre :
  - sous Chrome, miracle, ça fonctionne, la lettre est ignorée, ma valeur reste un entier, tout ce que je veux, simplement.
  - sous Edge, le champ se vide
En déboguant, sous Chrome, je m'aperçois que l'attribut value de l'input est null lorsqu'on tape des caractères non numériques, mais la valeur affichée contient bien tous les caractères tapés. En inspectant les différents objets (input et événement), je ne trouve pas d'attribut qui contiendrait ce qui est affiché. Première question donc : en existe-il et puis-je récupérer cette valeur et la modifier ?

Le pire, c'est que (sous Chrome) :
1. si je tape 100.1, la valeur affichée est 100.1, et la valeur obtenue par l'attribut value (ou par JQuery val()) est 1001 (c'est bien la valeur que je voudrais traiter, mais j'aimerais que logiquement cette valeur soit affichée à mon utilisateur telle que je vais la traiter).
2. si je tape 100., la valeur affichée est 100., et la valeur obtenue est null !!! (ce qui pour moi est absurde et incohérent avec le cas précédent).
Donc autre question : comment faire fonctionner ce truc de manière cohérente et logique ?

Accessoirement, j'ai aussi essayé en ajoutant pattern='[0-9]+' à mon champ, avec peu de conviction puisqu'en théorie cela ne devrait ne convenir qu'aux champs de type text (d'ailleurs, au final, j'envisage de tout passer en texte si je ne trouve pas de solution avec input number, et tant pis pour le min et le max que je traiterais autrement), et ça n'a strictement aucun effet.

Pour finir, j'ai testé en virant l'attribut step, mais pas de changement.

PS Cela me fait penser qu'il pourrait en plus y avoir une histoire de locale au sujet des différences de fonctionnement entre Chrome et Edge pour la virgule et le point, mais si je ne pouvais saisir que des chiffres, je n'aurais pas à me soucier de problèmes de locale.

Bonjour,
j'essaierai avec un <input type="text"> simplement et en mettant un écouteur input.
Code:

1 2 3 4 5 6 $('#id_input').on('input',function(){ var valeur = $(this).val(); valeur = valeur.replace(/\D+/,''); // on peut ajouter d'autres contrôles $(this).val(valeur); });

25/09/2017, 21h42
joel.drigo

Merci pour la proposition. C'est que j'ai fini par faire, en attendant une solution sur un type "number", même si ça me supprime les possibilités de min et de max (que je gère par validation et message d'erreur à la fin, bien que je pourrais le faire dans la fonction de remplacement) et la présence des spinners, qui me semblaient un plus appréciable dans le champ. Pour l'instant ça me fait sauter le curseur en fin de champ quand je saisi au milieu : je verrais plus tard si je peux faire quelque chose à ce sujet, même si c'est un problème important.
En tout cas, si c'est vraiment la seule solution, je vais faire avec.

[edit]Je marque le post en résolu, parce que j'ai une solution, mais ça ne veut pas dire que je ne suis pas preneur d'une solution pour un input type number (ou autre, genre type="integer" ;)).
27/09/2017, 18h41
NoSmoking

Citation:

... mais ça ne veut pas dire que je ne suis pas preneur d'une solution pour un input type number (ou autre, genre type="integer" ;)).

Le rêve est beau quand on sait qu'actuellement il existe pas mal de dysfonctionnement mais que la mise en forme « non valide » fonctionne.

Le pattern="/\D+/" n'empêche pas la mauvaise saisie.

Pas recherché mais ce peut qu'il existe un plugin « type="integer" » ;)

Citation:

Envoyé par NoSmoking

Pas recherché mais ce peut qu'il existe un plugin « type="integer" » ;)

J'en ai trouvé, testé, mais pas trouvé qui fonctionnaient à 100%. Celui qui fonctionne le "mieux" ne fonctionne pas sur Edge, et sur Chrome on peut coller ce qu'on veut dans le champ. L'exemple que tu as donné est pour l'instant ce qui fonctionne le mieux. J'ai ajouté un ou deux truc pour que le curseur se replace correctement, mais comme je n'arrive pas à déterminer la chaîne ajoutée en cas de coller, j'ai simplement annuler le coller s'il y a des caractères autre que des chiffres (ce n'est peut-être pas optimum, je suis relativement débutant en JavaScript). Ça marche comme je veux au moins sur Chrome et Edge.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 field.on('paste',function(e) { var clipboardData = e.originalEvent.clipboardData || window.clipboardData; var value = clipboardData.getData('Text'); var newvalue = value.replace(/\D+/g,''); if ( newvalue!=value) { e.preventDefault(); } }); field.on('propertychange input', function(e){ var $input = $(this); var value = $input.val(); var newvalue = value.replace(/\D+/g,''); if ( newvalue!==value ) { var curpos = getCursorPosition($input); $input.val(newvalue); setCursorPosition($input,curpos-1); } });

Bonjour,
Pour un champ avec type="number", j'ai tenté ceci (attention, keyCode et which sont dépréciés, le code est à retravailler idéalement) :
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 <input id="test" type="number"> <script> var ob_cham=document.getElementById("test"); //champ ob_cham.bl_toucChif=false; //touche chiffre ob_cham.bl_toucCtrl=false; //touche control ob_cham.addEventListener("drop",function(ev_) { ev_.preventDefault(); }); ob_cham.addEventListener("paste",function(ev_) { if((/^\d+$/.test(ev_.clipboardData.getData('Text')))===false) //à vérifier { ev_.preventDefault(); } }); ob_cham.addEventListener("keydown",function(ev_) { var nb_; if((nb_=ev_.keyCode)===17) { this.bl_toucCtrl=true; } else if(!((this.bl_toucCtrl===true && (nb_===88 || nb_===67 || nb_===86)) || //couper copier coller (this.bl_toucChif=(nb_>=48 && nb_<=57))===true || //peut-être un chiffre (confirmation dans onkeypress) (nb_>=96 && nb_<=105) || //chiffre [8,35,36,37,39,46].indexOf(nb_)!==-1)) //autres touches autorisées { ev_.preventDefault(); } }); ob_cham.addEventListener("keypress",function(ev_) { var nb_; if(this.bl_toucChif===true) { this.bl_toucChif=false; if((nb_=ev_.which)<48 || nb_>57) { ev_.preventDefault(); } } }); ob_cham.addEventListener("keyup",function(ev_) { if(ev_.keyCode===17) { this.bl_toucCtrl=false; } }); </script>
A cela, on peut ajouter un événement "blur" pour supprimer les 0 inutiles en début de chaîne et rester dans l'intervalle ["min","max"] défini.
A noter que dans le cas où on modifie la propriété "value" en cours de saisie (par exemple sur l'événement "paste", on pourrait ne garder que les chiffres), il n'est peut-être pas directement possible de repositionner le curseur pour ce type de champ, il faudrait tester si besoin une conversion temporaire en type="text" (voir "input type number cursor position" sur google).

(30/9 : événement "drop" et certaines remarques modifiés.)

28/09/2017, 09h42
SpaceFrog

https://www.developpez.net/forums/d7...t-champ-texte/

:salut:

En réaction au message n° 1 de @joel.drigo (je n'ai pas encore lu les autres messages).

Pour moi, cela fonctionne très bien sous Chrome, Firefox et Edge mais il faut l'utiliser dans son contexte.

Code:

1
2
3
4
5
<form id="myForm">
	<label>Un nombre entier entre 0 et 9 : </label><input type="number" name="myNumber" value="5" step="1" min="0" max="9" required="true">
	<input type="reset">
	<input type="submit">
</form>

Certes, on peut essayer d'introduire n'importe quoi, même croire que l'on a réussi, mais il ne faut pas oublier que les vérifications se font uniquement au moment de la soumission du formulaire. Il n'est pas soumis si le champ est incorrect !

Exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const
                                kMyForm = k$( "#myForm" ),
                                kMyNumber = kMyForm.querySelector( "[name='myNumber']");
                                
                                kMyForm.addEventListener( "submit", ev => {
                                        ev.preventDefault();
                                        ev.stopPropagation();
                                        
                                        klog( kMyNumber.value );
                                }, false );
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<form id="myForm">
			<label>Un nombre entier entre 0 et 9 : </label><input type="number" name="myNumber" value="5" step="1" min="0" max="9" required="true">
			<input type="reset">
			<input type="submit">
		</form>
 
	</main>
</body>
</html>

28/09/2017, 11h36
joel.drigo

Citation:

Envoyé par danielhagnoul

Certes, on peut essayer d'introduire n'importe quoi, même croire que l'on a réussi, mais il ne faut pas oublier que les vérifications se font uniquement au moment de la soumission du formulaire. Il n'est pas soumis si le champ est incorrect !

C'est bien ça le problème : ce n'est pas de la validation de formulaire que je voulais faire, mais empêcher de saisir. D'ailleurs, je n'ai aucun processus de soumission dans mon système (je n'ai même d'ailleurs qu'un formulaire parce qu'il parait qu'il vaut mieux avoir un <form> autour d'un <input>, mais je m'en passerais volontier), donc la validation à la soumission n'a aucun intérêt dans mon contexte. D'ailleurs, au sujet de ce principe, je te le trouve anti-ergomique. Je trouve pénible de pouvoir saisir n'importe quoi dans 42 champs pour avoir à la fin un message qui dit qu'il faut repasser sur certains (voire tous) parce que certaines valeurs sont invalides. Si une entrée est un entier, on ne devrait pouvoir saisir qu'un entier et pas autre chose.
28/09/2017, 19h51
NoSmoking

Citation:

je n'ai même d'ailleurs qu'un formulaire parce qu'il parait qu'il vaut mieux avoir un <form> autour d'un <input>, mais je m'en passerais volontier

un <input> peut tout à fait se passer d'un <form>.

Citation:

Je trouve pénible de pouvoir saisir n'importe quoi dans 42 champs pour avoir à la fin un message...

tu peux faire avantageusement le test sur l'événement blur du champ de saisie.

Citation:

Si une entrée est un entier, on ne devrait pouvoir saisir qu'un entier et pas autre chose.

Tu peux également ajouter un test sur l'événement keydow/keypress.
28/09/2017, 21h14
danielhagnoul

Citation:

Envoyé par joel.drigo

[...], je te le trouve anti-ergomique. Je trouve pénible de pouvoir saisir n'importe quoi dans 42 champs pour avoir à la fin un message qui dit qu'il faut repasser sur certains (voire tous) parce que certaines valeurs sont invalides. Si une entrée est un entier, on ne devrait pouvoir saisir qu'un entier et pas autre chose.

Cela peut en effet être énervant, mais le "système" ayant été conçu pour fonctionner de cette manière on peut s'attendre à bien des déboires s'y on essaie de s'en servir autrement.