web-dev-qa-db-fra.com

HTML5: type d'entrée numérique prenant uniquement des nombres entiers?

J'utilise les outils jQuery Validator 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 "numéro" peut avoir des nombres entiers et des nombres à virgule flottante. Cela semble incroyablement myope car ce ne sera un validateur utile que si les champs de votre 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 donc perdre des fonctionnalités supplémentaires telles que les flèches haut et bas pour les navigateurs qui le supportent). Existe-t-il un autre type d'entrée ou peut-être un attribut qui limiterait l'entrée à des entiers non signés? Je n'ai pas pu en trouver, merci.

MODIFIER

Ok les gars, j'apprécie votre temps et votre aide, mais je vois beaucoup de votes positifs non mérités se déroulant: D. Définir le pas à 1 n’est pas la solution car cela ne limite pas l’entrée. Vous pouvez toujours taper un nombre négatif en virgule flottante dans la zone de texte. De plus, je suis au courant de la validation du modèle (je l’ai mentionné dans mon message original), 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 pose des inconvénients lors de l'utilisation de la validation de jQuery Tools, mais il semble maintenant que la spécification ne permet pas une méthode plus propre pour le faire. 

jqueryhtml5validationjquery-tools
206
JayPea

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

273
Aurélien Ooms

Définissez l'attribut step sur 1:

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

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

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

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

\d est l'expression régulière d'un nombre, * signifie qu'il en accepte plus d'un .. .. Voici la démo: http://jsfiddle.net/b8NrE/1/

150
js-coder

Le moyen le plus simple en utilisant JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
31
Tarek Kalaji
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

A l’aide de ce code, le nombre de caractères saisis dans le champ de texte est limité à la limite.

Attribut Patter doc

24
thejustv

Le motif est agréable, mais si vous voulez limiter la saisie aux nombres uniquement avec type = "text", vous pouvez utiliser oninput et une expression régulière comme ci-dessous:

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

Je me fait la guerre :)

15
Viktor Karpyuk

Ce n'est pas seulement pour HTML 5 que tous les navigateurs fonctionnent correctement. essaye ça 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
14
karthick

Les régularités sont toujours préférables pour la restriction, essayez oninput et min se produisent 1 pour ne saisir que des nombres à partir de 1 

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
7
Noothan y v

avez-vous essayé de définir l'attribut step à 1 comme ceci

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

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 paremeter min et max? Je l'ai essayé en utilisant Chrome 19 (travaillé) et Firefox 12 (ne fonctionnait pas).

4
wilsonfoz

Je travaillais sur Chrome et j'avais quelques problèmes, même si j'utilise des attributs HTML. J'ai fini avec ce code js

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

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

        return true;
});
3
a.valchev

Définissez step="any". Fonctionne bien ..__ Référence: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

3
udit mittal

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 .

Vérifiez la documentation .

2
Black Shell

Définissez l'attribut step sur un nombre flottant, par exemple. 0,01 et vous êtes prêt à partir.

2
Mantas K.

D'après les spécifications

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

Vous pouvez donc simplement le définir sur 1:

2
David Hedlund
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);
    }
});
2
Sarthak

Il suffit de le mettre dans votre champ de saisie: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

2
illeas
 <input type="number" min="0" step="1" pattern="\d+"/>
1
Nikolay_R

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.

0
Michal