Je crée une page Web où j'ai un champ de texte dans lequel je veux autoriser uniquement les caractères numériques comme (0,1,2,3,4,5 ... 9) 0-9.

Comment puis-je faire cela en utilisant jQuery?

^{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.}

jQuery

Essayez- le vous-même sur JSFiddle .

Il n'y a pas d'implémentation jQuery native pour cela, mais vous pouvez filtrer les valeurs d'entrée d'un texte <input>avec le inputFilterplugin suivant (prend en charge Copier + Coller, Glisser + Déposer, raccourcis clavier, opérations de menu contextuel, touches non typables, position du curseur, différent dispositions du clavier et tous les navigateurs depuis IE 9 ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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 = "";
      }
    });
  };
}(jQuery));

Vous pouvez maintenant utiliser le inputFilterplugin pour installer un filtre d'entrée:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits 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!

JavaScript pur (sans jQuery)

jQuery n'est pas réellement nécessaire pour cela, vous pouvez également faire la même chose avec du JavaScript pur. 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 .

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 ensuite l'attacher à votre contrôle en faisant:

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

En ligne:

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

Style discret (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 pouvez simplement utiliser une simple expression régulière JavaScript pour tester les caractères purement numériques:

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

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

ou pour le keycode 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 d'entrée 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 un problème).
• Il fonctionne également sur le contenu généré par AJAX, car nous utilisons "on".
• Meilleures performances que le keydown, par exemple lors d'un événement de collage.

Court et doux - même si cela ne trouvera jamais beaucoup d'attention après plus de 30 réponses;)

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

Utilisez 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 à ce sujet mais en utilisant jQuery: Restreindre l'entrée dans les zones de texte HTML aux valeurs numériques

$(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 simplement la classe à toute entrée qui a besoin de ce comportement.

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

Le 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 modèle HTML5:

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

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

Vous pouvez faire de même 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. Cela fonctionne parfaitement !!!

Vous pouvez essayer la saisie du nombre HTML5 :

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

Pour les navigateurs non conformes, il existe des solutions de repli Modernizr et Webforms2 .

L'attribut pattern en HTML5 spécifie une expression régulière par rapport à laquelle la valeur de l'élément est vérifiée.

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

Remarque: l'attribut de modèle fonctionne avec les types d'entrée suivants: texte, recherche, URL, tél, e-mail et mot de passe.

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

• {1,3} il représente un minimum de 1 et un maximum de 3 chiffres peuvent être saisis.

Quelque chose d'assez simple en utilisant jQuery.validate

$(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 suppressNonNumericInput (événement) {

    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 sélectionner du texte ou de copier-coller comme le font d'autres solutions. Style jQuery :)

$("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 zone de texte comme ceci:

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

J'utilise ce qui précède dans la production, et cela fonctionne parfaitement, et c'est multi-navigateur. De plus, il ne dépend pas de jQuery, vous pouvez donc le lier à votre zone de texte 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 ;
  })

J'ai écrit le mien basé sur le post de @ user261922 ci-dessus, légèrement modifié pour que vous puissiez tout sélectionner, tabuler et gérer plusieurs champs "nombre uniquement" 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;
        }
    });
});

Voici une solution rapide que j'ai créée il y a quelque temps. vous pouvez en savoir 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);
});

Vous souhaitez autoriser l'onglet:

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

Voici une réponse qui utilise la fabrique de widgets jQuery UI. Vous pouvez facilement personnaliser les personnages autorisés.

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

Cela permettrait des chiffres, 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));
});

Vous devez vous assurer que le clavier numérique et la touche de tabulation fonctionnent également

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

Je voulais aider un peu, et j'ai fait ma version, la onlyNumbersfonction ...

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

Ajoutez simplement la balise d'entrée "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." et vous avez terminé;)

Je voudrais également 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 ... juste des chiffres. :) Presque ça peut fonctionner juste avec le 'flou', mais ...

Un moyen simple de vérifier que la valeur entrée 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 zone de texte pour accepter uniquement le numéro.

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

Essayez cette solution ici

Vous pouvez essayer la saisie du nombre HTML5:

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

Cet élément de balise d'entrée prendrait désormais une valeur uniquement comprise entre 0 et 9, car l'attribut min est défini sur 0 et l'attribut max est défini sur 9.

pour plus d'informations, visitez http://www.w3schools.com/html/html_form_input_types.asp