HTML5: type de saisie numérique qui ne prend que des entiers?

250

J'utilise le validateur d' outils jQuery qui implémente les validations HTML5 via jQuery. Cela fonctionne très bien jusqu'à présent, sauf pour une chose. Dans la spécification HTML5, le type d'entrée "nombre" peut avoir à la fois des nombres entiers et des nombres à virgule flottante. Cela semble incroyablement à courte vue car il ne sera un validateur utile que lorsque vos champs de base de données sont des nombres à virgule flottante signés (pour les entrées non signées, vous devrez revenir à la validation de "modèle" et ainsi perdre des fonctionnalités supplémentaires comme le haut et le bas). flèches pour les navigateurs qui le prennent en charge). Existe-t-il un autre type d'entrée ou peut-être un attribut qui restreindrait l'entrée aux seuls entiers non signés? Je n'en ai pas trouvé, merci.

ÉDITER

Ok, les gars, j'apprécie votre temps et votre aide, mais je vois beaucoup de votes positifs non mérités: D. La définition de l'étape à 1 n'est pas la réponse car elle ne restreint pas l'entrée. Vous pouvez toujours saisir un nombre à virgule flottante négatif dans la zone de texte. De plus, je suis au courant de la validation des modèles (je l'ai mentionné dans mon message d'origine), mais cela ne faisait pas partie de la question. Je voulais savoir si HTML5 permettait de restreindre une entrée de type "nombre" à des valeurs entières positives. Il semble que la réponse à cette question serait «non, ce n'est pas le cas». Je ne voulais pas utiliser la validation de modèle car cela provoque certains inconvénients lors de l'utilisation de la validation jQuery Tools, mais il semble maintenant que la spécification ne permette pas une manière plus propre de le faire.

jquery html validation jquery-tools JayPea
la source
3
Depuis 2019 - je ne sais pas depuis quand - l' numberentrée (dans FF / Chrome / Safari au moins) accepte désormais uniquement les entiers par défaut, sauf si vous définissez une valeur explicite pour l' stepattr qui autorise les valeurs décimales; par exemple: step="0.01". MDN documenté ici . Dans deux esprits à ce sujet parce que je pense que c'est un défaut raisonnable, mais aussi un changement de rupture (oui, cela a affecté un certain code que j'ai écrit).
Darragh Enright

Réponses:

326

https://www.w3.org/wiki/HTML/Elements/input/number

Le meilleur que vous puissiez obtenir avec HTML uniquement

<input type="number" min="0" step="1"/>
Développer l'extrait

Aurélien Ooms
la source
6
Vous devriez probablement mettre minà 1comme il veut des nombres positifs (et non des nombres non négatifs).
Martin Thoma
1
@pwdst Je l'appuie. <input type="number" min="0" step="1"/>est la réponse la plus correcte à la question. Quoi qu'il en soit, à quoi bon avoir les deux step="1"et pattern="\d+"? Je ne peux pas saisir de nombres à virgule flottante dans les deux cas.
Danish Ashfaq
27
Cela n'a pas fonctionné pour moi sur la dernière version de Chrome. Il ne permet pas de taper des lettres, mais il permet d'insérer des caractères spéciaux.
Malavos
2
Pourquoi je peux taper e in
Grant Sun
4
@grantsun pour les nombres exponentiels, par exemple 10e20.
sn3ll le
181

Définissez l' stepattribut sur 1:

<input type="number" step="1" />

Cela semble un peu bogué dans Chrome en ce moment, donc ce n'est peut-être pas la meilleure solution pour le moment.

Une meilleure solution consiste à utiliser l' patternattribut, qui utilise une expression régulière pour faire correspondre l'entrée:

<input type="text" pattern="\d*" />

\dest l'expression régulière d'un nombre, *ce qui signifie qu'il accepte plusieurs d'entre eux. Voici la démo: http://jsfiddle.net/b8NrE/1/

codeur js
la source
2
Comme JayPea l'a appris, tous les navigateurs ne prennent pas encore en charge tous les éléments HTML5, il est donc préférable de fournir une dégradation gracieuse, comme vous l'avez proposé.
DOK
6
La validation HTML5 @Zut ne vous empêche pas de saisir ces clés. Cela empêche simplement l'envoi du formulaire avec ces caractères. Si vous soumettez un formulaire avec une entrée du typenumber qui contient d'autres caractères, Chrome vous affichera un message d'erreur.
codeur js
2
@dotweb - Je vois votre point. La différence entre les deux est qu'avec l'attribut number, tous les caractères alphabétiques sont automatiquement supprimés lorsque je désélectionne (déclencheur de flou) pour l'entrée. Cela ne se produit pas lors de l'utilisation de l'attribut pattern. Je suppose que cette distinction n'est importante que si vous utilisez AJAX pour publier vos données et que vous utilisez un autre événement que submitde déclencher la publication.
Zut
6
Cela ne fait pas ce qu'OP a demandé. Seuls les entiers /\d*/.test(1.1) // true
vsync
2
@vsync pattern="\d*"n'est pas identique à /\d*/, pattern="\d*"est égal à /^(?:\d*)$/, veuillez vous référer à la documentation des attributs de modèle HTML5 .
Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

En utilisant ce code, l'entrée dans le champ de texte limite pour entrer uniquement des chiffres. Le modèle est le nouvel attribut disponible dans HTML 5.

Doc d'attribut de modèle

thejustv
la source
9
Selon la spécification, l' attribut de modèle ne peut être utilisé que lorsque le type d'entrée est Texte, Recherche, URL, Téléphone, E-mail, Mot de passe (comme illustré ici avec le type "Texte"). Cela signifie que la sémantique du type de saisie numérique et donc (surtout) les claviers numériques à l'écran de certaines tablettes et téléphones est perdue lors de l'utilisation de cette méthode.
pwdst le
3
Cela sur firefox 36.0 vous permet de taper des lettres et des caractères spéciaux.
Malavos
1
Cela ne limite pas la saisie aux seuls chiffres, vous pouvez toujours taper des lettres!
HadidAli
35

La manière simple d'utiliser JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Tarek Kalaji
la source
Je ne comprends pasreplace(/(\..*)\./g, '$1')
codyc4321
3
Il est important d'accepter les nombres flottants et de répéter .une seule fois, par exemple 123.556peut être écrit.
Tarek Kalaji,
8
@TarekKalaji - interroge des états entiers et non des nombres flottants
vsync
qu'en est-il de l'appareil mobile? car le texte de type affiche tous les claviers (caractères alfanumériques également)
Nuri YILMAZ
27

Le motif est sympa mais si vous voulez restreindre l'entrée aux nombres uniquement avec type = "text", vous pouvez utiliser oninput et une regex comme ci-dessous:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Je préviens pour moi :)

Viktor Karpyuk
la source
Sachez que cette approche peut annuler votre méthode (de modification) (gestionnaire d'événements) et également effacer votre valeur par défaut dans la zone de saisie.
HadidAli
14

Ce n'est pas seulement pour html5 tous les navigateurs fonctionnent bien. essaye ça 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
Leopard
la source
12
C'est mauvais. Sur l'entrée, essayez: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Utilisez à la oninputplace
zanderwar
1
Lorsque cette réponse a été écrite, HTML5 n'était pas publié. @zanderwar
Muhammet Can TONBUL
11

Motif sont toujours préférables pour la restriction, essayer oninputet minproduire 1 pour entrer des chiffres de 1 à compter

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Noothan yv
la source
C'est une solution très instructive. Qu'est-ce que pour «value = $ {var}»?
Développeur
@AcademyofProgrammer exemple de valeur par défaut pour cette entrée
Shinigamae
meilleure réponse! fonctionne pour coller, fonctionne même dans IE (10+), vous donne la liberté d'afficher n'importe quel clavier via le type d'entrée, et ne fait pas afficher par chrome ces flèches embêtantes vers le haut / bas à l'intérieur du champ.
Janosch
5

avez-vous essayé de définir l' stepattribut sur 1 comme celui-ci

<input type="number" step="1" />
DevTeamExpress
la source
4

Peut-être que cela ne convient pas à tous les cas d'utilisation, mais

<input type="range" min="0" max="10" />

peut faire du bon travail: violon .

Consultez la documentation .

Luca Fagioli
la source
3

Oui, HTML5 le fait. Essayez ce code ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Voir le paremètre min et max? Je l'ai essayé en utilisant Chrome 19 (fonctionnait) et Firefox 12 (ne fonctionnait pas).

Wilsonfoz
la source
Cela suppose que vous souhaitez une plage connue. Mais si vous vouliez une valeur entière, cela fonctionnerait-il toujours?
RandomHandle
3

Mettez-le simplement dans votre champ de saisie: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

illeas
la source
3

Je travaillais sur Chrome et j'ai eu quelques problèmes, même si j'utilise des attributs html. Je me suis retrouvé avec ce code js

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
a.valchev
la source
J'ai fini par l'utiliser aussi avec 1 petit ajustement; J'ai changé parseInt (value) en parseInt (value.replace ('.', ''). Cela m'a permis de coller 1,56 et de garder la valeur affichée à 156 au lieu de 1.
codescribblr
2

D'après les spécifications

step="any"ou nombre à virgule flottante positif
Spécifie la granularité de la valeur de l'élément.

Vous pouvez donc simplement le définir sur 1:

David Hedlund
la source
9
J'ai essayé cela, mais le problème est que vous pouvez toujours taper un nombre à virgule flottante dans la zone de texte.
JayPea
Donc, vous avez besoin d'un code qui empêche l'utilisateur de taper un point décimal?
Blazemonger
2

Définissez l' stepattribut sur n'importe quel nombre flottant, par exemple 0,01 et vous êtes prêt à partir.

Mantas K.
la source
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
Sarthak
la source
0

Actuellement, il n'est pas possible d'empêcher un utilisateur d'écrire des valeurs décimales dans votre entrée avec HTML uniquement. Vous devez utiliser javascript.

Michal
la source
0 

<input type="number" oninput="this.value = Math.round(this.value);"/>
Développer l'extrait

R. Yaghoobi
la source
-2

Dans le futur ™ (voir Puis-je utiliser ), sur les agents utilisateurs qui vous présentent un clavier, vous pouvez restreindre une saisie de texte à seulement numérique avec input[inputmode].

Weston
la source
inputmodeest principalement destiné aux appareils portables et déclenchera la disposition correcte du clavier, mais pour les ordinateurs "normaux" avec claviers, il n'empêchera pas d'entrer ce que vous voulez.
vsync