web-dev-qa-db-fra.com

Comment bloquer +, -, e dans le type d'entrée Number?

Lorsque je donne le numéro de type de saisie, la lettre e et les caractères spéciaux sont également affichés dans le champ de saisie. Je veux afficher uniquement les chiffres. Comment les bloquer?

<input type="number">

javascripthtmlangularjs
17
Surya Teja

Essayez d'empêcher le comportement par défaut si vous n'aimez pas la valeur de clé entrante:

document.querySelector(".your_class").addEventListener("keypress", function (evt) {
    if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

// 0 for null values
// 8 for backspace 
// 48-57 for 0-9 numbers
<input type="number" class="your_class">

9
Sidharth Gusain

Vous pouvez bloquer la saisie de ces caractères avec l'événement keydown

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});
<input type="number" id="inputBox" />

mais l'utilisateur peut toujours les saisir s'il fait un copier/coller (ou via la console). Pour empêcher le copier/coller, vous pouvez effectuer un remplacement sur la valeur entrée [*].

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("input", function() {
  this.value = this.value.replace(/[e\+\-]/gi, "");
});

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});
<input type="number" id="inputBox" />

* Vous ne pouvez pas vraiment obtenir la valeur entrée sur un champ de saisie avec le type défini sur nombre. Vous pouvez obtenir la valeur entrée tant qu’il s’agit d’un nombre, c’est-à-dire que la valeur passe le contrôle du nombre interne. Si l'utilisateur copie/colle 1e, la solution proposée échouera.

Qu'est-ce qui se passe lorsque vous entrez 1e est que, champ de saisie vérifie si c'est un nombre, et si ce n'est pas (1e n'est pas), il envoie un avertissement:

La valeur spécifiée "1e" n'est pas un nombre valide. La valeur doit correspondre à l'expression régulière suivante: -? (\ D + |\d +.\D + |.\D +) ([eE] [- +]?\D +)?

et la propriété value est définie sur "".

Si vous vérifiez les propriétés du champ, vous trouverez la propriété valueAsNumber. Si la valeur entrée est un nombre, le champ de saisie analyse la valeur et la stocke dans valueAsNumber. Puisque 1e n'est pas un nombre, il vaut NaN, et NaN est attribué à valueAsNumber et value est défini sur "". Bien que vous voyiez toujours 1e dans le champ de saisie.

J'ai posé une question liée à ce problème, mais pas encore de solution.

Récupère la valeur entrée dans le champ de saisie du numéro, pas celle analysée

8
akinuri

Vous pouvez le faire facilement en utilisant jQuery

Essayez ce code

$(function() {
    $("#input").keypress(function(event) {
        if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
            $(".alert").html("Enter only digits!").show().fadeOut(2000);
            return false;
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" />
<div class="alert"></div>

3
Hitesh Misro

Au lieu d'essayer de bloquer des valeurs, vous pouvez essayer de remplacer des valeurs qui ne sont pas numériques.

Si vous choisissez de gérer les codes clés, vous devrez gérer numKeys, numPad, shift +, crtl + etc. et essayer d'actualiser alors que le focus est dans le champ de texte échouera également. Prevent Default empêchera beaucoup plus que des valeurs incorrectes.

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

3
Rajesh
$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>
2
Prins Kumar Gupta

Puisque la question d'OP était marquée avec 'angularjs', la solution la plus propre serait probablement d'utiliser une directive. Plusieurs solutions pour cette approche ont déjà été expliquées ici:

angularjs: autorise uniquement la saisie de nombres dans une zone de texte

2
dperish

Suivant la forme des réponses ci-dessus, la plupart des exemples ci-dessus le couvrent, je viens de remarquer que, lorsque vous saisissez "E", cela est toujours admissible, je pense donc que le mieux est de l’ajouter dans la matrice. J'utilise Jquery 3.3.1 dans cet exemple.

De même, tout ce que vous entrez dans le tableau sera empêché d’être saisi dans la zone de saisie.

Remarque - prenez l'identificateur d'élément comme identifiant de l'élément auquel vous souhaitez appliquer ce paramètre De la même manière, si vous souhaitez l'appliquer à toutes les entrées dont le type est numéro dans JQuery -> $ (" input [type = 'numéro'] ") 

var invalidChars = ["-", "e", "+", "E"];

$("input[type='number']").on("keydown", function(e){ 
    if(invalidChars.includes(e.key)){
         e.preventDefault();
    }
}):

Cet exemple ci-dessus devrait fonctionner sur toutes les entrées avec un type de nombre et éviter que les caractères "-", "e", "+" et "E" soient saisis dans l'entrée.

1
Callistus Asirvatham