Comment autoriser uniquement le numérique (0-9) dans la zone de saisie HTML à l'aide de jQuery?


901

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?


73
Gardez à l'esprit que vous ne pouvez pas compter sur la validation côté client - vous devez également valider sur le serveur au cas où l'utilisateur a désactivé JavaScript ou n'utilise pas un navigateur compatible JavaScript.
cjk

45
avez-vous pensé html5? <type d'entrée = "nombre" />. avec des attributs min et max, vous pouvez également restreindre l'entrée
ZX12R

5
Je pense que vous devriez vérifier les valeurs d'entrée sur l'événement keyup et ne pas vérifier les codes clés, car il est beaucoup plus fiable entre les différences de claviers et ce qui ne l'est pas.
Richard

13
Je suis entièrement d'accord avec Richard: n'utilisez pas de codes clés. La réponse acceptée ne fonctionne pas sur les claviers français, par exemple, car vous devez appuyer sur "Shift" pour taper des nombres sur ces claviers. Les codes clés sont tout simplement trop risqués, à mon humble avis.
MiniQuark

3
@ ZX12R Ne fonctionne dans aucune des versions actuelles d'IE. C'est bien beau d'utiliser le dernier code sur vos propres trucs pour rester au frais, mais ce n'est pas vraiment une option pour presque n'importe quel projet professionnel. caniuse.com/#feat=input-number
Eric

Réponses:


1260

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 .


45
Merci! event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 si vous voulez des décimales
Michael L Watson

9
Ajoutez les codes clés 37 et 39 pour autoriser la navigation à gauche et à droite dans la zone txt, par exemple: if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
Anthony Queen le

22
ooo, viens de relever un problème pour cela de nos testeurs. Vous devez empêcher l'utilisateur de maintenir la touche Maj enfoncée et d'appuyer sur les touches numériques, sinon l'entrée sera autorisée! @ # $% ^ & * ()
Allen Rice

6
Confirmé le shift + bug. De plus, le pavé numérique ALT + permet à peu près tout (c'est-à-dire Alt + 321 = A, Alt + 322 = B, etc.). Un autre cas pour la validation côté serveur.
Anthony Queen

140
Je suis vraiment en désaccord avec cette réponse: il est vraiment trop risqué de jouer avec les codes clés, car vous ne pouvez pas être sûr de la disposition du clavier. Par exemple, sur les claviers français, les utilisateurs doivent appuyer sur Maj pour taper des nombres. Donc, ce code ne fonctionnera pas du tout. Veuillez donc opter pour la validation au lieu de ce hack de code.
MiniQuark

182

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

2
j'ai trouvé cela utile, mais j'ai trouvé un "bug" ennuyeux. lorsque j'utilise ceci sur mon iMac, il autorise une lettre, comme a et e. il semble que les chiffres du clavier sur le PC soient des lettres sur l'iMac et le clavier Mac est le même que les chiffres réguliers. quelqu'un sait comment le faire fonctionner sur mac et pc?
Volmar

3
Les touches "Accueil", "Fin" ne fonctionnent pas non plus. C'est une meilleure solution que Peter a suggérée: west-wind.com/weblog/posts/2011/Apr/22/…
bman

Pourquoi y en a-t-il return this.each(function() ?
powtac

2
@powtac - vous pouvez donc appeler .ForceNumericOnly () sur plusieurs objets. Par exemple ... $ ("input [type = 'text']" "). ForceNumericOnly ()
Oliver Pearmain

1
@powtac le eachfrom return this.each(function()permet d'autoriser plusieurs objets comme l'a dit HaggleLad, et la returnpartie consiste à renvoyer l'objet jQuery à l'appelant, pour permettre le chaînage tel que$("input[type='text'").ForceNumericOnly().show()
Jose Rui Santos

149

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


2
Cela déplace le curseur jusqu'au bout même si l'utilisateur appuie sur la touche fléchée gauche.
Phrogz

1
@phrogz, essayez ceci: onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')".
Patrick Fisher

Cela fonctionne parfaitement et empêche Shift + numéro contrairement à ceux ci-dessus.
Nick Hartley

5
@ mhenry1384 C'est le comportement attendu. Je trouve que ce sont de bons commentaires, mais si vous n'aimez pas cela, alors une approche de code clé serait ce que vous recherchez.
Patrick Fisher

2
Vous pouvez modifier pour /[^0-9]|^0+(?!$)/gempêcher les premières séries de zéro.
Johny Skovdal

105

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

11
Voir ma réponse pour une implémentation de cette approche.
Patrick Fisher

ne faudrait-il pas moins de temps au processeur pour rechercher une pression numérique plutôt que de vérifier une expression régulière?
andrsnn

87

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.

6
J'ai l'impression que c'est une solution beaucoup plus robuste (et plus simple) que la réponse acceptée.
Jeremy Harris

Encore plus simple si vous utilisez replace (/ \ D / g, '')
Alfergon

salut, comment puis-je assurer une valeur numérique avec un decimalentre 0.0à 24.0Je ne peux pas le laisser entrer dans le.
transformateur

Je suggère d'utiliserthis.value = Number(this.value.replace(/\D/g, ''));
HasanG

Bonne réponse, permet de basculer facilement si une entrée est numérique ou non en basculant la classe
raklos

55

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

5
Je remplacerais la saisie par entrée, sinon vous pouvez maintenir une lettre enfoncée, puis cliquer pour retirer le focus de la zone de texte et laisser le texte tel quel. entrée assure que cela ne peut pas se produire
WizLiz

Merci pour l'expression régulière - mais il s'agit d'un gestionnaire d'événements un peu meilleur: $ ('# number_only'). On ('input propertychange', function () {this.value = this.value.replace (/ [^ 0-9] /g, ''); });
BradM

3
FYI - La question ne l'a pas demandé, mais cela ne permet pas de décimales (par exemple 12,75). Lier "entrée" plutôt que "keyup" permet une UX plus fluide au lieu de voir leur personnage pendant une fraction de seconde, puis de le supprimer.
Paul

44

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


40
Eh bien ... "Ne pas utiliser JQuery" sauf pour la partie de votre exemple qui utilise JQuery ...
GalacticCowboy

document.getElementById('inputid').val() mec .. c'est toujours jquery. .val()est une chose jquery. utilisation.value
mpen


salut, comment puis-je assurer la valeur numérique avec un decimalentre 0.0à 24.0je ne peux pas le laisser entrer dans le.
transformateur

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


6
Wow, videz les blocs "si" et les nombres magiques tous les deux! Je viens de vomir un peu dans ma bouche. : D Mais sérieusement, pourquoi se donner tant de mal alors que vous pouvez simplement faire correspondre l'entrée avec l'expression régulière /^^. Et que représente le «8»?
Alan Moore

@Alan: Haha, je n'en ai aucune idée - j'ai copié directement depuis la source. J'écrirais «if (event.keyCode! = 46 && event.keyCode! = 8)» à la place, ou utiliser l'expression régulière comme vous l'avez dit. Je suppose que le 8 représente la touche de suppression.
Ivar

4
Essayez d'appuyer sur Maj + 8 par exemple - votre validation laissera * entrer
Anton

C'est bien, ce serait beaucoup mieux, s'il gère la touche Maj + les chiffres (caractères spéciaux comme! @ # $% ^ ..)
Shyju

27

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

1
Code sympa, élégant et utile! Merci. Mais vous devez ajouter des événements keyup et keydown.
Silvio Delgado

25

Le plus simple pour moi est

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

7
Juste besoin d'être sûr que vous utilisez this.value.replace(/[^0-9\.]/g,'');pour inclure les exigences OP de 0-9
Chalise

24

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.


2
Cela devrait avoir beaucoup plus de votes. Si quoi que ce soit, vous pouvez également ajouter une expression régulière de secours pour les navigateurs non html5 - mais la validation des données doit être gérée côté serveur de toute façon.
Markus

il semble qu'il soit bien pris en charge par la plupart des navigateurs à l'heure actuelle, donc le support modernizr n'est pas si important: caniuse.com/#search=pattern Safari fonctionne très bien même s'il est répertorié comme partiellement pris en charge sur ce site. Essayez!
invité le

@guest Merci beaucoup pour cela. Réponse la plus rapide et la plus simple! Meilleure réponse à mon avis.
BinaryJoe01

19

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


Peut-être que c'est mieux /\d|\./ pour permettre. nombres décimaux
Zango

Cela fonctionne parfaitement dans crome. Mais pas dans Mozilla FireFox
Kirataka

salut, comment puis-je garantir une valeur numérique avec un decimalentre 0.0à 24.0Je ne peux pas le laisser entrer dans le.
transformateur

ne fonctionne pas avec copier-coller
mrid


14

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.


salut, comment puis-je garantir une valeur numérique avec un decimalentre 0.0à 24.0Je ne peux pas le laisser entrer dans le.
transformateur

1
@transformer essayez ce <input type = "number" pattern = "[0-9] + ([\.,] [0-9] +)?" step = "0.01">
vickisys

11

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

8

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

salut, comment puis-je garantir une valeur numérique avec un decimalentre 0.0à 24.0Je ne peux pas le laisser entrer dans le.
transformateur

8

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

Hé, j'utilise ceci, mais ce que je cherche vraiment, c'est de lui permettre de faire des points comme 1.2 ou 3.455 comme ça
Vivekh

8

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

Cela échoue lorsque quelqu'un colle du texte non numérique dans l'entrée. Une idée sur la façon dont nous pourrions surmonter cela? Je ne peux pas en finir avec ça.
Kiran Ruth R

7

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

vous oubliez la saisie au clavier. Cela comprendrait que:if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
tomvo

6

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

6

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

6

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

6

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 assure-t-il $ puis + - comme premier ou premier / deuxième caractère et ensuite seulement 1 point décimal?
gordon

6

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

5

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

5

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


5

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


5

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

5

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


5

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.