Saisir uniquement des nombres en JavaScript

1. Utiliser l’attribut de champ number et définir la condition pour keyCode en JavaScript
2. Utiliser l’attribut de champ input et définir la condition pour keyCode en JavaScript

Aucune méthode ou propriété spécifique en JavaScript ne permettra directement au champ HTML input de ne prendre que des valeurs de type number. Il existe plutôt un attribut number pour le champ input qui ne prend que des valeurs de type numérique dans la zone de saisie.

Une autre façon d’effectuer la tâche de filtrer uniquement les nombres consiste à définir le type de champs input sur input, ce qui signifie activer presque toutes les sortes d’entrées possibles. Ceci prend en compte les valeurs alphanumériques.

Les conditions spécifiques implicites dans le code JavaScript filtreront alors pour n’accepter que les nombres.

Nous allons travailler avec l’événement keypress et récupérer son keyCode dans les cas suivants. Et plus tard, en fonction de notre motivation, nous fixerons certaines conditions pour valider uniquement les données de type nombre.

Un exemple aura l’attribut number et l’autre aura l’attribut input pour le champ de saisie.

Utiliser l’attribut de champ number et définir la condition pour keyCode en JavaScript

Notre exemple aura un champ de saisie correspondant à une base de code JavaScript. Dans un premier temps, nous allons récupérer le keyCode via event.keyCode ou event.which.

Ce keyCode et which fonctionne de manière similaire varie d’un navigateur à l’autre. Donc, finalement en fonction des codes, nous allons filtrer les valeurs.

Vérifions la barrière de code.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
  $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

Production:

Comme on peut le voir, nous avons appuyé sur a=65, b=66 et c=67, mais ces valeurs n’ont pas été acceptées. Et plus tard, les valeurs 4 et 2 ont été placées dans la zone de saisie.

Utiliser l’attribut de champ input et définir la condition pour keyCode en JavaScript

Nous définirons de la même manière le code JavaScript pour notre champ de saisie dans ce segment, mais cet attribut sera défini sur input. Par défaut, l’attribut de type Number prend des nombres et exclut les autres caractères, mais dans le cas du type input, nous aurons le privilège de saisir d’autres caractères comme le retour arrière, les lettres, etc.

Ici, notre code JavaScript validera pour ne compter que les nombres.

Extrait de code:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
    	return true;
    }
};
   $(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>

Production: