La saisie de texte HTML n'autorise que la saisie numérique

https://stackoverflow.com/questions/469357

19-08-2019
|

Question

Existe-t-il un moyen rapide de définir une entrée de texte HTML (<input type=text />) pour autoriser uniquement les frappes numériques (plus '.')?

La solution

^{Remarque: la réponse est à jour. Les commentaires ci-dessous font référence à une ancienne version contenant des codes de clé.}

JavaScript

La fonction setInputFilter ci-dessous vous permet d'utiliser un filtre tout type sur un texte < input > , y compris divers filtres numériques ( voir ci-dessous).

Contrairement à la plupart des autres solutions, ce supporte correctement Copier + coller, Glisser + déposer, tous les raccourcis clavier, toutes les opérations du menu contextuel, toutes les touches non typables (telles que les touches de curseur et de navigation), le curseur position, toutes les configurations de clavier de toutes les langues et de toutes les plateformes et tous les navigateurs depuis IE 9 .

Essayez vous-même sur JSFiddle .

// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Certains filtres d'entrée que vous pouvez utiliser:

Entier valeurs (positives uniquement):
/ ^ \ d * $ /. test (valeur)
Nombre entier (positives et allant jusqu'à une limite particulière):
/ ^ \ d * $ /. test (valeur) & amp; & amp; (valeur === "" || parseInt (valeur) < = 500)
Nombre entier (positifs et négatifs):
/ ^ -? \ d * $ /. test (valeur)
Valeurs en virgule flottante (autorisant à la fois . et , en tant que séparateur décimal):
/ ^ -? \ d * [.,]? \ d * $ /. test (valeur)
Monnaie (c'est-à-dire deux décimales au plus):
/ ^ -? \ d * [.,]? \ d {0,2} $ /. test (valeur)
AZ seulement (lettres latines de base):
/ ^ [a-z] * $ / i.test (valeur)
Lettres latines uniquement (anglais et dans la plupart des langues européennes, voir https: // unicode-table .com pour plus de détails sur les plages de caractères Unicode):
/ ^ [a-z \ u00c0- \ u024f] * $ / i.test (valeur)
Valeurs hexadécimales :
/ ^ [0-9a-f] * $ / i.test (valeur)

Notez que vous devez toujours faire une validation côté serveur!

jQuery

Il existe également une version jQuery de cela. Voir cette réponse ou essayez-la vous-même sur JSFiddle .

HTML 5

HTML 5 propose une solution native avec < input type = " number " > (voir spécification ), mais notez que la prise en charge du navigateur varie:

La plupart des navigateurs ne valideront la saisie que lors de la soumission du formulaire, et non lors de la frappe.
La plupart des navigateurs mobiles ne prennent pas en charge l'étape , , Attributs min et max .
Chrome (version 71.0.3578.98) permet toujours à l'utilisateur de saisir les caractères e et E dans le champ. Voir également cette question .
Firefox (version 64.0) et Edge (EdgeHTML version 17.17134) permettent toujours à l'utilisateur de saisir du texte dans le champ.

Essayez-le vous-même sur w3schools.com .

Autres conseils

Utiliser ce DOM

<input type='text' onkeypress='validate(event)' />

Et ce script

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

J'ai longuement et durement cherché une bonne réponse à cette question, et nous avons désespérément besoin de < input type = " number , mais à part cela, ces deux méthodes sont les plus concises. Je pourrais venir avec:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Si vous n'aimez pas le caractère non accepté affiché pendant une fraction de seconde avant d'être supprimé, la méthode ci-dessous est ma solution. Notez les nombreuses conditions supplémentaires, afin d'éviter de désactiver toutes sortes de navigation et de raccourcis clavier. Si quelqu'un sait comment compacter cela, faites-le-nous savoir!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Voici un exemple simple qui permet de n’avoir qu’une décimale, mais pas plus:

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

Et encore un exemple qui me convient parfaitement:

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;
    }
};

Joindre également à l'événement de frappe de touche

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Et HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Voici un exemple jsFiddle

HTML5 contient < type d’entrée = numéro > , ce qui vous convient parfaitement. Actuellement, seul Opera le prend en charge de manière native, mais il existe un projet doté d'une implémentation JavaScript.

La plupart des réponses ici ont toutes la faiblesse d'utiliser des événements clés .

Beaucoup de réponses limiteraient votre capacité à sélectionner du texte avec des macros de clavier, du copier-coller et un comportement plus indésirable. D'autres semblent dépendre de plugins jQuery spécifiques, qui tuent des mouches avec des mitraillettes.

Cette solution simple semble fonctionner mieux pour toutes les plates-formes, quel que soit le mécanisme de saisie utilisé (frappe au clavier, copier + coller, copier-coller avec le bouton droit de la souris, parole, texte, etc.). Toutes les macros du clavier de sélection de texte fonctionneraient toujours et limiteraient même la possibilité de définir une valeur non numérique à l'aide d'un script.

function forceNumeric(){
    this.value(this.value.replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input.numeric-text', forceNumeric);

J'ai choisi d'utiliser une combinaison des deux réponses mentionnées ici, c'est-à-dire

< input type = " number " / >

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

< input type = " text " onkeypress = "return isNumberKey (event);" >

HTML5 prend en charge les expressions rationnelles, vous pouvez donc utiliser ceci:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Attention: certains navigateurs ne le supportent pas encore.

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

De plus, vous pouvez ajouter une virgule, un point et un signe moins (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

2 solutions:

Utilisez un validateur de formulaire (par exemple, avec le plug-in de validation jQuery )

Effectuez une vérification lors de l'événement onblur (c'est-à-dire lorsque l'utilisateur quitte le champ) du champ de saisie, avec l'expression régulière suivante:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*<*>quot;);
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Si simple ....

// Dans une fonction JavaScript (peut utiliser HTML ou PHP).

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Dans votre saisie de formulaire:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Avec entrée max. (Ces derniers permettent un numéro à 12 chiffres)

Une approche plus sûre consiste à vérifier la valeur de l'entrée au lieu de détourner les touches du clavier et d'essayer de filtrer les codes de clé.

Ainsi, l’utilisateur est libre d’utiliser les flèches du clavier, les touches de modification, les retours à l’arrière, les supprimer, les barres de frappe non standard, la souris, les coller, les glisser-déposer et même les entrées d’accessibilité.

Le script ci-dessous autorise les nombres positifs et négatifs

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: J'ai enlevé mon ancienne réponse parce que je pense qu'elle est désuète maintenant.

Veuillez trouver ci-dessous la solution mentionnée. Dans cet utilisateur peut être en mesure d'entrer uniquement la valeur numérique , l'utilisateur ne peut pas non plus être en mesure de copier , coller , glisser et déposez en entrée.

Caractères autorisés

0,1,2,3,4,5,6,7,8,9

Caractères interdits et caractères liés aux événements

Valeur alphabétique
Caractères spéciaux
Copier
Coller
Faites glisser
Déposer

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Faites-moi savoir si cela ne fonctionne pas.

Vous pouvez utiliser un modèle pour cela:

<input id="numbers" pattern="[0-9.]+" type="number">

Vous pouvez voir ici Conseils complets sur l'interface du site Web mobile .

Si vous souhaitez suggérer au périphérique (peut-être un téléphone portable) entre alpha et numérique, vous pouvez utiliser < saisie type = " numéro " > .

Une mise en œuvre simple et rapide utilisant jQuery et replace () au lieu de regarder event.keyCode ou event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Seul petit effet secondaire: la lettre tapée apparaît momentanément et CTRL / CMD + A semble se comporter un peu étrange.

Code JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Code HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

fonctionne parfaitement parce que le code de retour arrière est 8 et qu'une expression regex ne le laisse pas. C'est donc un moyen facile de contourner le bogue:)

Juste une autre variante avec jQuery utilisant

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

type d'entrée = "nombre" est un attribut HTML5.

Dans le cas contraire, cela vous aidera:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Encore un exemple où vous pouvez ajouter uniquement des chiffres dans le champ de saisie, ne peuvent pas lettres

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

utilisez simplement type = "nombre" , maintenant cet attribut pris en charge par la plupart des navigateurs

<input type="number" maxlength="3" ng-bind="first">

Vous pouvez également comparer la valeur d'entrée (qui est traitée comme une chaîne par défaut) à elle-même forcée comme une valeur numérique, comme:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Cependant, vous devez associer cela à un événement tel que keyup, etc.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Utilisez ce DOM:

<input type = "text" onkeydown = "validate(event)"/>

Et ce script:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... OU ce script, sans indexOf, utilisant deux pour les ...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

J'ai utilisé l'attribut onkeydown au lieu de onkeypress, car l'attribut onkeydown est vérifié avant l'attribut onkeypress. Le problème serait dans le navigateur Google Chrome.

Avec l'attribut "onkeypress", la tabulation serait incontrôlable avec "preventDefault". sur Google Chrome, cependant, avec l’attribut "onkeydown", la tabulation devient contrôlable!

Code ASCII pour TAB = > 9

Le premier script a moins de code que le second, cependant, le tableau de caractères ASCII doit avoir toutes les clés.

Le second script est beaucoup plus gros que le premier, mais le tableau n'a pas besoin de toutes les clés. Le premier chiffre dans chaque position du tableau correspond au nombre de fois que chaque position sera lue. Pour chaque lecture, sera incrémenté de 1 à la suivante. Par exemple:

NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57

Dans le cas des clés numériques, il n’ya que 10 (0 - 9), mais s’ils étaient au nombre de 1 million, il n’aurait pas de sens de créer un tableau avec toutes ces clés.

Codes ASCII:

8 == > (Retour arrière);
46 = > (Supprimer);
37 = > (flèche gauche);
39 = > (flèche droite);
48 - 57 = > (chiffres);
36 = > (maison);
35 = > (fin);

Il s'agit d'une fonction améliorée:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

La meilleure façon (autoriser TOUS les types de nombres - réel négatif, réel positif, entier négatif, entier positif) est:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
});

Ceci est la version étendue de la solution de geowa4 . Prend en charge les attributs min et max . Si le nombre est en dehors de la plage, la valeur précédente sera affichée.

Vous pouvez le tester ici.

Utilisation: < type d'entrée = text classe = 'numéro' longueur maximale = 3 min = 1 max = 500 >

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Si les entrées sont dynamiques, utilisez ceci:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Ma solution pour une meilleure expérience utilisateur:

HTML

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

Détails:

Tout d’abord, types d’entrée :

numéro montre les flèches haut / bas qui rétrécissent l'espace de saisie réel, je les trouve laides et ne sont utiles que si le nombre représente une quantité (éléments tels que téléphones, indicatifs régionaux, identifiants ... don ' pas besoin d'eux) tel fournit des validations similaires du navigateur sans flèches

L'utilisation de [numéro / tel] permet également d'afficher le clavier numérique sur les appareils mobiles.

Pour la validation JS, j’ai eu besoin de 2 fonctions, l’une pour l’entrée utilisateur normale (touche), l’autre pour un correctif copier-coller (modification), d’autres combinaisons me procureraient une expérience utilisateur déplorable.

J'utilise plus fiable KeyboardEvent.key au lieu de maintenant obsolète KeyboardEvent.charCode

En fonction de la prise en charge de votre navigateur, vous pouvez utiliser Array.prototype.includes () au lieu du Array.prototype.indexOf () (pour les résultats true / false)

Un moyen facile de résoudre ce problème consiste à implémenter une fonction jQuery pour valider avec regex les caractères saisis dans la zone de texte, par exemple:

Votre code html:

<input class="integerInput" type="text">

Et la fonction js utilisant jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow