Comment autoriser seulement numérique (0-9) dans HTML inputbox en utilisant jQuery?

Voici la fonction que j'utilise:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

vous pouvez alors l'attacher à votre commande en faisant:

$("#yourTextBoxName").ForceNumericOnly();

Inline:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Discrète style (avec jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

vous pourriez juste utiliser une expression régulière JavaScript simple pour tester les caractères purement numériques:

/^[0-9]+$/.test(input);

Cela renvoie vrai si l'entrée est numérique ou false sinon.

ou pour le code d'événement, utilisation simple ci-dessous:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

vous pouvez utiliser sur l'événement input comme ceci:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

mais, quel est ce privilège de code?

• il fonctionne sur les navigateurs mobiles(keydown et keyCode ont problème).
• il fonctionne sur le contenu généré AJAX aussi, parce que nous utilisons"on".
• meilleure performance que keydown, par exemple sur l'événement paste.

utiliser la fonction JavaScript isNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ("inputid").val()))

if (isNaN(document.getElementById('inputid').value))

mise à Jour: Et voici un bel article parlant de cela, mais en utilisant jQuery: restreindre L'entrée dans les boîtes de textes HTML à des valeurs numériques

Court et doux, même si ce ne sera jamais le trouver beaucoup d'attention après 30+ réponses ;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Source: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

j'utilise ceci dans notre fichier JS commun interne. J'ajoute la classe à toutes les entrées qui ont besoin de ce comportement.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

plus simple pour moi est

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

pourquoi si compliqué? Vous n'avez même pas besoin de jQuery car il existe un attribut de motif HTML5:

<input type="text" pattern="[0-9]*">

ce qui est cool, c'est qu'il évoque un clavier numérique sur les appareils mobiles, ce qui est bien mieux que d'utiliser jQuery.

vous pouvez faire la même chose en utilisant cette solution très simple

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

j'ai fait référence à ce lien pour la solution. Il fonctionne parfaitement!!!

l'attribut pattern dans HTML5 spécifie une expression régulière contre laquelle la valeur de l'élément est cochée.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Note: l'attribut pattern fonctionne avec les types d'entrée suivants: texte, Recherche, url, tel, email, et mot de passe.

• [0-9] peut être remplacé par n'importe quelle condition d'expression régulière.

• {1,3} représente un minimum de 1 et un maximum de 3 chiffres peut être entré.

vous pouvez essayer le HTML5 nombre entrée:

<input type="number" value="0" min="0"> 

pour les navigateurs non conformes il y a Modernizr et Webforms2 fallbacks.

quelque chose d'assez simple en utilisant jQuery.valider

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

fonction suppressnonumericinput (event) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

je suis arrivé à une solution très bonne et simple qui n'empêche pas l'utilisateur de choisir le texte ou copier collage comme les autres solutions. jQuery style:)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

vous pouvez utiliser cette fonction JavaScript:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

et vous pouvez le lier à votre boîte de texte comme ceci:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

je l'utilise au-dessus de la production, et il fonctionne parfaitement, et il est cross-browser. En outre, il ne dépend pas de jQuery, de sorte que vous pouvez le lier à votre boîte aux lettres avec JavaScript en ligne:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

je pense que ça va aider tout le monde

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

Voici une solution rapide que j'ai créée il y a quelque temps. vous pouvez lire plus à ce sujet dans mon article:

http://ajax911.com/numbers-numeric-field-jquery /

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

Voici une réponse qui utilise jquery UI Widget factory. Vous pouvez personnaliser les caractères autorisés facilement.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

qui permettrait des nombres, des signes numériques et des montants en dollars.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

cela semble incassable.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

je voulais aider un peu, et j'ai fait ma version, la fonction onlyNumbers ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

il suffit d'ajouter la balise input"...entrée. .. id="prix" onkeydown="return onlyNumbers(event)"..."et c'est fait ;)

j'ai écrit le mien basé sur le post de @user261922 ci-dessus, légèrement modifié de sorte que vous pouvez sélectionner Tout, onglet et peut gérer plusieurs champs" nombre seulement " sur la même page.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

je voudrais aussi répondre :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

C'est ça...seulement des chiffres. :) Presque cela peut fonctionner juste avec le 'flou', mais...

vous voudriez autoriser tab:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

la façon Simple de vérifier que la valeur enter est numérique est:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

il suffit d'appliquer cette méthode dans Jquery et vous pouvez valider votre boîte de texte pour n'accepter que le numéro.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\d+$";
return value.match(regExp); 
}

d'Essayer cette solution ici

vous pouvez essayer L'entrée de numéro HTML5:

<input type="number" placeholder="enter the number" min="0" max="9">

cet élément de la balise d'entrée n'aurait désormais qu'une valeur comprise entre 0 et 9 comme l'attribut min est défini à 0 et l'attribut max est défini à 9.

pour plus d'information sur la visite http://www.w3schools.com/html/html_form_input_types.asp

besoin de s'assurer que vous avez le clavier numérique et la touche de tabulation fonctionne trop

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }