web-dev-qa-db-fra.com

Empêcher les entrées négatives dans le type d'entrée de formulaire = "nombre"?

Je veux limiter la saisie de l'utilisateur aux nombres positifs sous une forme html. 

Je sais que vous pouvez définir min = "0", mais il est possible de le contourner en entrant manuellement un nombre négatif. 

Existe-t-il un autre moyen de résoudre ce problème sans écrire de fonction de validation?

htmlhtml5formsinputnumbers
28
Ali

Cela utilise Javascript, mais vous n'avez pas à écrire votre propre routine de validation. Au lieu de cela, vérifiez simplement la propriété validity.valid. Cela sera vrai si et seulement si l'entrée tombe dans la plage.

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

59
Mikel Rychliski

Ceci n'est pas possible sans valider la valeur de l'entrée.

type d'entrée = nombre

L’élément input avec un attribut type dont la valeur est "number" représente un contrôle précis permettant de définir la valeur de l’élément sur un string représentant un nombre.

Comme il s’agit d’une chaîne représentant le nombre, il n’ya aucun moyen de s’assurer que cette chaîne représente ou non des valeurs numériques.

Les attributs autorisés ne vous donneront pas la possibilité de valider la valeur du contrôle de saisie numérique.

Une façon de faire cela avec l'aide de JavaScript pourrait ressembler à ceci.

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)
<input type="number" min="0" />

Si vous envisagez d’envoyer vos données à un serveur, assurez-vous de les valider également sur le serveur ..___ JavaScript côté client ne peut pas garantir que les données envoyées seront conformes à vos attentes.

28
DavidDomain

type="number" résout déjà le fait de permettre la saisie de chiffres uniquement, comme le soulignent les autres réponses.

Juste pour référence: avec jQuery, vous pouvez écraser les valeurs négatives sur focusout avec le code suivant:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

Cela ne remplace pas la validation côté serveur!

1
Hafenkranich

Le script suivant n'autorise que les chiffres ou un retour arrière à entrer.

var number = document.getElementById('number');

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<input type="number" id="number" min="0">

1
Tiny Giant