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

^{Remarque: Ceci est une réponse mise à jour. Les commentaires ci-dessous se réfèrent à une ancienne version qui dérangeait les codes clés.}

Javascript

Essayez- le vous-même sur JSFiddle .

Vous pouvez filtrer les valeurs d'entrée d'un texte <input>avec la setInputFilterfonction suivante (prend en charge Copier + Coller, Glisser + Déposer, raccourcis clavier, opérations de menu contextuel, touches non typables, position du curseur, différentes dispositions de clavier et tous les navigateurs depuis IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
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);
      } else {
        this.value = "";
      }
    });
  });
}

Vous pouvez maintenant utiliser la setInputFilterfonction pour installer un filtre d'entrée:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Voir la démo JSFiddle pour plus d'exemples de filtre d'entrée. Notez également que vous devez toujours effectuer la validation côté serveur!

Manuscrit

En voici une version TypeScript.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Il existe également une version jQuery de cela. Voir cette réponse .

HTML 5

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

• La plupart des navigateurs ne valideront l'entrée que lors de la soumission du formulaire, et non lors de la saisie.
• La plupart des navigateurs mobiles ne prennent pas en charge les step, minet les maxattributs.
• Chrome (version 71.0.3578.98) permet toujours à l'utilisateur d'entrer les caractères eet Edans le champ. Voir aussi cette question .
• Firefox (version 64.0) et Edge (EdgeHTML version 17.17134) permettent toujours à l'utilisateur de saisir n'importe quel texte dans le champ.

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

Utilisez 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 cherché longuement et durement une bonne réponse à cela, et nous avons désespérément besoin <input type="number", mais à court de cela, ces 2 sont les moyens les plus concis que je pourrais trouver:

<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 effacé, 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 le compacter, 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) )">

En voici une simple qui autorise exactement une décimale, mais pas plus:

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

Et un autre exemple, qui fonctionne très bien pour moi:

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

Attache également à l'événement de pression 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 a <input type=number>, ce qui vous convient. Actuellement, seul Opera le prend en charge nativement, mais il existe un projet qui a 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é à faire de la sélection de texte avec des macros de clavier, copier / coller et des comportements plus indésirables, d'autres semblent dépendre de plugins jQuery spécifiques, ce qui tue les mouches avec les mitrailleuses.

Cette solution simple semble fonctionner le mieux pour moi multiplateforme, quel que soit le mécanisme de saisie (frappe, copier + coller, copier + coller avec le bouton droit, parole-texte, etc.). Toutes les macros de clavier de sélection de texte fonctionneraient toujours, et cela limiterait même la capacité de celles-ci à définir une valeur non numérique par script.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

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

<input type="number" />

et

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

Avertissement: certains navigateurs ne le prennent pas encore en charge.

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

supplémentaire, vous pouvez ajouter une virgule, un point et un moins (, .-)

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

HTML

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

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 formulaire, saisissez:

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

Avec entrée max. (Ces ci-dessus permet un nombre à 12 chiffres)

2 solutions:

Utiliser un validateur de formulaire (par exemple avec le plugin de validation jQuery )

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

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

</script>

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

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

De cette façon, l'utilisateur est libre d'utiliser les flèches du clavier, les touches de modification, le retour arrière, la suppression, l'utilisation des claviers non standard, la souris pour coller, le glisser-déposer du texte et même les entrées d'accessibilité.

Le script ci-dessous permet des 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 supprimé mon ancienne réponse parce que je pense qu'elle est désuète maintenant.

Vous pouvez utiliser un modèle pour cela:

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

Ici vous pouvez voir les conseils complets sur l'interface du site Web mobile .

Veuillez trouver ci-dessous la solution mentionnée. Dans cet utilisateur peut être en mesure d'entrer seulement numericvaleur, également utilisateur ne peut pas être en mesure de copy, paste, draget dropen entrée.

Caractères autorisés

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

Personnages non autorisés et personnages lors d'événements

• Valeur alphabétique
• Caractères spéciaux
• Copie
• Pâte
• Traîne
• Laissez tomber

$(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.

Si vous souhaitez suggérer à l'appareil (peut-être un téléphone portable) entre alpha ou numérique, vous pouvez utiliser <input type="number">.

Un autre exemple où vous pouvez ajouter uniquement des chiffres dans le champ de saisie, ne peut pas les 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');">

Une implémentation courte et douce 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 que la lettre tapée apparaît momentanément et CTRL / CMD + A semble se comporter un peu étrange.

input type="number" est un attribut HTML5.

Dans l'autre cas, 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)"/>

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 car le code de retour arrière est 8 et une expression regex ne le permet pas, c'est donc un moyen facile de contourner le bogue :)

Un moyen facile de résoudre ce problème consiste à implémenter une fonction jQuery pour valider avec regex les caractères tapés 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"/>


		

Juste une autre variante avec jQuery utilisant

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

il suffit d'utiliser type = "number" maintenant cet attribut supportant 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 en tant que numérique, comme:

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

Cependant, vous devez le lier à un événement comme une touche, etc.

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

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

J'ai vu de bonnes réponses mais je les aime aussi petites et aussi simples que possible, alors peut-être que quelqu'un en bénéficiera. J'utiliserais javascript Number()et des isNaNfonctionnalités comme celle-ci:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

J'espère que cela t'aides.

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, en utilisant deux for...

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", TAB serait incontrôlable avec "preventDefault" sur google chrome, cependant, avec l'attribut "onkeydown", TAB 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 deuxième script est beaucoup plus gros que le premier, mais le tableau n'a pas besoin de toutes les clés. Le premier chiffre de chaque position du tableau est le 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 ne sont que 10 (0 - 9), mais si elles étaient 1 million, il ne serait pas logique 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 => (nombres);
• 36 => (domicile);
• 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, iinteger 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();
    };
}); 

Il s'agit de la version étendue de la solution de geowa4 . Supports minet maxattributs. Si le nombre est hors limites, la valeur précédente sera affichée.

Vous pouvez le tester ici.

Usage: <input type=text class='number' maxlength=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'));
            }
    }); 
});