HTML de saisie de texte permettent uniquement d'entrée numérique

JavaScript

^{Remarque: C'est une mise à jour de réponse. Les commentaires ci-dessous font référence à l'ancienne version qui foiré autour avec les codes de touches.}

La setInputFilter fonction dans le script ci-dessous vous permet d'utiliser tout sorte de filtre d'entrée sur un texte <input>, y compris les divers filtres numériques. Cela permettra de gérer correctement les Copier+Coller, Glisser+Chute, les raccourcis clavier, menu contextuel, les non-typable clés, la position du curseur, toutes les dispositions de clavier et tous les navigateurs depuis IE 9. Note que vous avez toujours doit faire côté serveur de validation!

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

Utilisation:

//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, vous pouvez utiliser:

• Entier valeurs (positives et négatives):
  
  /^-?\d*$/.test(value)
• Entier (valeurs positives seulement):
  
  /^\d*$/.test(value)
• Entier valeurs (positives et jusqu'à une certaine limite):
  
  /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
• Virgule flottante valeurs (permettant à la fois . et , comme séparateur décimal):
  
  /^-?\d*[.,]?\d*$/.test(value)
• Monnaie valeurs (c'est à dire à plus de deux décimales):
  
  /^-?\d*[.,]?\d{0,2}$/.test(value)
• Hexadécimal valeurs:
  
  /^[0-9a-f]*$/i.test(value)

jQuery

Il y a aussi une version jQuery. Voir cette réponse ou essayez-le vous-même sur JSFiddle.

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 validez la saisie lors de la soumission du formulaire, et non pas lors de la saisie.
• La plupart des navigateurs mobiles ne prennent pas en charge la step, min et max attributs.
• Chrome (version 71.0.3578.98) permet toujours à l'utilisateur d'entrer les caractères e et E dans le domaine. Voir aussi cette question.
• Firefox (version 64.0) et Edge (EdgeHTML version 17.17134) encore permettre à l'utilisateur d'entrer tout texte dans le champ.

Essayer vous-même sur w3schools.com.

Plus complexe des options de validation de

Si vous voulez faire quelques autres de validation des pièces et de morceaux, cela pourrait être pratique:

• https://gist.github.com/nbouvrette/84ef4f498ac06cdd5b60
• http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
• https://github.com/lockevn/html-numeric-input
• https://github.com/jonstipe/number-polyfill

OriginalL'auteur

J'ai cherché longtemps et dur pour une bonne réponse, et nous avons désespérément besoin <input type="number", mais de courte durée, ces 2 sont les plus concis façons que je pouvais venir avec:

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

Si vous n'aimez pas la non-accepté le caractère montrant pour une fraction de seconde avant d'être effacée, la méthode ci-dessous est ma solution. Remarque les nombreuses conditions supplémentaires, c'est pour éviter la désactivation de toutes sortes de navigation et les touches de raccourcis. Si quelqu'un sait comment compactify cela, laissez-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) )">

OriginalL'auteur

HTML5 a <input type=number>, ce qui semble bon pour vous. Actuellement, seulement à l'Opéra prend en charge en mode natif, mais il est un projet qui a un JavaScript de mise en œuvre.

OriginalL'auteur

J'ai opté pour l'utilisation d'une combinaison des deux réponses mentionné 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);">

OriginalL'auteur

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émentaires vous pouvez ajouter virgule, point et moins (,.-)

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

HTML

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

OriginalL'auteur

Si simple....

//Dans une fonction JavaScript (vous pouvez utiliser du 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 d'entrée:

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

Avec entrée max. (Ci-dessus permet un numéro à 12 chiffres)

OriginalL'auteur

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

OriginalL'auteur

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 keycode de la touche retour arrière est de 8 et une expression regex ne pas le laisser, c'est donc un moyen facile de contourner le bug 🙂

OriginalL'auteur

input type="number" est un attribut HTML5.

Dans l'autre cas, ce sera vous aider à:

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

OriginalL'auteur

suffit d'utiliser type="number" maintenant cet attribut de soutien dans la plupart des navigateurs

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

OriginalL'auteur

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

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

OriginalL'auteur

C'est une amélioration de la fonction:

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

OriginalL'auteur

C'est la version étendue de geowa4 de la solution. Prend en charge min et max attributs. Si le nombre est hors de portée, la valeur précédente sera affichée.

Vous pouvez le tester ici.

Utilisation: <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 utiliser 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'));
            }
    }); 
});

OriginalL'auteur