Restreindre l'entrée à la zone de texte: n'autoriser que les nombres et le point décimal

108

Comment puis-je restreindre l'entrée à une zone de texte afin qu'elle n'accepte que les nombres et la virgule décimale?

javascript  html 
— Étain
source
11
Sa question initiale était géniale, Amar ... !!! Pourquoi le changer ..? ;)
— SpikETidE
14
Pourquoi les votes négatifs? Le gars est nouveau ici, aidez-le à améliorer ses questons, plz.
— lexu
Ayyappan.Anbalagan, ajoutez quelques exemples à l'article :) Toutes ces chaînes sont-elles correctes pour vous? 192 192.168 192.168.0.1
— lak-b
je l'ai eue homme merci .. seulement 22,22 formate aussi il ne devrait autoriser que 5 caractères dans la txtbox ...
— TinTin
Quel est le problème avec, isNaN(this.textbox.value)??
— Sam007

Réponses:

158 

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>
Développer l'extrait

Cela fonctionne vraiment!

— rebisco
source
1
Pourquoi && charCode> 31 est-il nécessaire?
— contactmatt
2
Le caractère 31 est le code séparateur d'unité. La plupart des nombres et du texte sont compris entre 32 et plus. Le code lit que si le code de caractère entré n'est pas la décimale ET est supérieur à 31 (séparateur d'unité) mais inférieur à 48 (numéro zéro) ou supérieur à 57 (numéro neuf), ne l'acceptez pas.
— Paul Williams
9
if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Il sera privé multiple '.'... :)
— Anish Karunakaran
10
inclure les touches numériques du clavier et les périodes avec:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)
— mga
1
c'est en accepter plus d'un ». [période] ', ce qui est faux je suppose.
— Akshay Chawla
26 
form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

Est-ce ce que vous recherchez?

J'espère que cela aide.

EDIT: J'ai édité mon exemple ci-dessus afin qu'il ne puisse y avoir qu'un seul point, précédé d'au moins un chiffre et suivi d'au moins un chiffre.

— tau
source
1
Je pense que cela validera également '99 .23.65.86 '... Mais je suppose que la question portait sur la validation de' 56987.32 'avec un seul point .....
— SpikETidE
Je vois que l'affiche a depuis édité sa question originale. Merci pour la mise à jour!
— tau
1
Je ferais mieux d'utiliser /^\d+([
— \
26

La solution acceptée n'est pas complète, car vous pouvez saisir plusieurs «.», Par exemple 24 .... 22..22. avec quelques petites modifications, cela fonctionnera comme prévu:

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>
Développer l'extrait

— Hassan Mokdad
source
J'ai utilisé votre réponse mais j'ai modifié cette onkeypress = "return isNumberKey (this, event);"
— Bilbo Baggins
oui je pense qu'il est facultatif de taper passer l'événement, car cela fonctionne avec les deux cas, merci
— Hassan Mokdad
nous a sauvé quelques coups de clé .. tq
— Irf
le seul problème avec celui-ci est que vous pouvez copier coller du texte. L'ajout à l'élément d'entrée ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"semble être suffisant
— clamchoda
C'est un mauvais service pour chaque utilisateur de les empêcher d'utiliser le glisser-déposer ou le copier-coller.
— Hubert Grzeskowiak
19

Voici une autre solution qui permet les nombres décimaux et limite également les chiffres après la décimale à 2 décimales.

function isNumberKey(evt, element) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">
Développer l'extrait

— Kurenai Kunai
source
Presque parfait .. la dernière condition de votre ifest manquant un "C" majuscule.
— DNKROZ
Belle solution !!
— Michael Murray
Beutiful. Fonctionne parfaitement pour moi.
— Noor Ahmed
Notez que cette solution autorise plusieurs points ( .), tiret ( -) et la lettre elorsque le texte est collé ou déposé sur le champ. L'élément HTML affichera également deux flèches pour incrémenter et décrémenter le nombre par défaut dans Chrome. Le bouton de décrémentation permet au nombre de tomber en dessous de zéro.
— Hubert Grzeskowiak
12

Toutes les solutions présentées ici utilisent des événements clés uniques. Ceci est très sujet aux erreurs car l'entrée peut également être donnée en utilisant copier-coller ou glisser-déposer. De plus, certaines des solutions restreignent l'utilisation de clés sans caractère comme ctrl+c, Pos1etc.

Je suggère plutôt que de vérifier à chaque pression de touche, vous vérifiez si le résultat est valide par rapport à vos attentes.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}
<textarea id="test1" oninput="validateNumber(this);" ></textarea>
Développer l'extrait

L' oninputévénement est déclenché juste après que quelque chose a été modifié dans la zone de texte et avant d'être rendu.

Vous pouvez étendre le RegEx au format numérique que vous souhaitez accepter. C'est beaucoup plus facile à maintenir et extensible que la vérification des pressions sur une seule touche.

— Hubert Grzeskowiak
source
C'est la solution la plus élégante!
— jkd
4

Cherchez-vous quelque chose comme ça?

   <HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
  </HTML>
— lak-b
source
4

Il suffit d'appliquer cette méthode dans Jquery et vous pouvez valider votre zone de texte pour n'accepter que le nombre avec une décimale uniquement.

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

Veuillez voir la démo de travail ici

— Jitender Kumar
source
2

Pour tous ceux qui trébuchent ici comme moi, voici une version de jQuery 1.10.2 que j'ai écrite et qui fonctionne très bien pour moi, même si elle est gourmande en ressources:

/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
    var target = $(this);

    var prev_val = target.val();

    setTimeout(function(){
        var chars = target.val().split("");

        var decimal_exist = false;
        var remove_char = false;

        $.each(chars, function(key, value){
            switch(value){
                case '0':
                case '1':
                case '2':
                case '3':
                case '4':
                case '5':
                case '6':
                case '7':
                case '8':
                case '9':
                case '.':
                    if(value === '.'){
                        if(decimal_exist === false){
                            decimal_exist = true;
                        }
                        else{
                            remove_char = true;
                            chars[''+key+''] = '';
                        }
                    }
                    break;
                default:
                    remove_char = true;
                    chars[''+key+''] = '';
                    break;
            }
        });

        if(prev_val != target.val() && remove_char === true){
            target.val(chars.join(''))
        }
    }, 0);
});
— SingeZeus
source
2

Une petite correction à la brillante réponse de @ rebisco pour valider parfaitement la décimale.

function isNumberKey(evt) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
        return false;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
— Anish Karunakaran
source
c'est très bien. Cependant, je voudrais le limiter à 2 décimales, de toute façon pour le faire?
— nodeffect
2

Si vous le souhaitez pour les valeurs flottantes,

Voici la fonction que j'utilise

<HTML>

<HEAD>
  <SCRIPT language=Javascript>
    <!--
    function check(e, value) {
      //Check Charater
      var unicode = e.charCode ? e.charCode : e.keyCode;
      if (value.indexOf(".") != -1)
        if (unicode == 46) return false;
      if (unicode != 8)
        if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
    }
    //-->
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>

</HTML>
Développer l'extrait

— Rahul
source
1 
inputelement.onchange= inputelement.onkeyup= function isnumber(e){
    e= window.event? e.srcElement: e.target;
    while(e.value && parseFloat(e.value)+''!= e.value){
            e.value= e.value.slice(0, -1);
    }
}
— Kennebec
source
1 
function integerwithdot(s, iid){
        var i;
        s = s.toString();
        for (i = 0; i < s.length; i++){
            var c;
            if (s.charAt(i) == ".") {
            } else {
                c = s.charAt(i);
            }
            if (isNaN(c)) {
                c = "";
                for(i=0;i<s.length-1;i++){
                    c += s.charAt(i);
                }
                document.getElementById(iid).value = c;
                return false;
            }
        }
        return true;
    }
— Jonas Reycian
source
1

voici un script qui peut vous aider:

<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
    var temp = obj.value;

    // avoid changing things if already formatted correctly
    var reg0Str = '[0-9]*';
    if (decimalPlaces > 0) {
        reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
    } else if (decimalPlaces < 0) {
        reg0Str += '\[\,\.]?[0-9]*';
    }
    reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
    reg0Str = reg0Str + '$';
    var reg0 = new RegExp(reg0Str);
    if (reg0.test(temp)) return true;

    // first replace all non numbers
    var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
    var reg1 = new RegExp(reg1Str, 'g');
    temp = temp.replace(reg1, '');

    if (allowNegative) {
        // replace extra negative
        var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
        var reg2 = /-/g;
        temp = temp.replace(reg2, '');
        if (hasNegative) temp = '-' + temp;
    }

    if (decimalPlaces != 0) {
        var reg3 = /[\,\.]/g;
        var reg3Array = reg3.exec(temp);
        if (reg3Array != null) {
            // keep only first occurrence of .
            //  and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
            var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
            reg3Right = reg3Right.replace(reg3, '');
            reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
            temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
        }
    }

    obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
    var key;
    var isCtrl = false;
    var keychar;
    var reg;
    if(window.event) {
        key = e.keyCode;
        isCtrl = window.event.ctrlKey
    }
    else if(e.which) {
        key = e.which;
        isCtrl = e.ctrlKey;
    }

    if (isNaN(key)) return true;

    keychar = String.fromCharCode(key);

    // check for backspace or delete, or if Ctrl was pressed
    if (key == 8 || isCtrl)
    {
        return true;
    }

    reg = /\d/;
    var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
    var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
    var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
    return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
    var temp=obj.value;
    if(temp=="-")
    {
        temp="";
    }

    if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(".")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(",")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    temp=temp.replace(",",".") ;
    obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>

<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">
— Fathi Amin
source
1

Supposons que le nom de votre champ de zone de texte soit Income
Appelez cette méthode de validation lorsque vous devez valider votre champ:

function validate() {
    var currency = document.getElementById("Income").value;
      var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ;
    if (pattern.test(currency)) {
        alert("Currency is in valid format");
        return true;
    } 
        alert("Currency is not in valid format!Enter in 00.00 format");
        return false;
}
— Pallavi Agarwal
source
1

Extension de la réponse de @ rebisco. ce code ci-dessous n'autorisera que des chiffres et un simple «.» (point) dans la zone de texte.

function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        } else {
            // If the number field already has . then don't allow to enter . again.
            if (evt.target.value.search(/\./) > -1 && charCode == 46) {
                return false;
            }
            return true;
        }
    }
— Santosh Kurdekar
source
1

Meilleure solution

var checkfloats = function(event){
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    if(event.target.value.indexOf('.') >=0 && charCode == 46)
        return false;

    return true;
}
— Allan Pereira
source
1

J'ai choisi de m'attaquer à cela sur l' oninputévénement afin de gérer le problème du collage du clavier, du collage de la souris et des frappes de touches. Passez vrai ou faux pour indiquer une validation décimale ou entière.

Il s'agit essentiellement de trois étapes en trois doublures. Si vous ne voulez pas tronquer les décimales, commentez la troisième étape. Les ajustements d'arrondi peuvent également être effectués à la troisième étape.

// Example Decimal usage;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
    try {

        // For integers, replace everything except for numbers with blanks.
        if (!isDecimal) 
            elm.value = elm.value.replace(/[^0-9]/g, ''); 
        else {
            // 1. For decimals, replace everything except for numbers and periods with blanks.
            // 2. Then we'll remove all leading ocurrences (duplicate) periods
            // 3. Then we'll chop off anything after two decimal places.

            // 1. replace everything except for numbers and periods with blanks.
            elm.value = elm.value.replace(/[^0-9.]/g, '');

            //2. remove all leading ocurrences (duplicate) periods
            elm.value = elm.value.replace(/\.(?=.*\.)/g, '');

            // 3. chop off anything after two decimal places.
            // In comparison to lengh, our index is behind one count, then we add two for our decimal places.
            var decimalIndex = elm.value.indexOf('.');
            if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
        }
    }
    catch (err) {
        alert("ValidateNumber " + err);
    }
}
— clamchoda
source
0

À partir de la réponse @rebisco:

function count_appearance(mainStr, searchFor) {
    return (mainStr.split(searchFor).length - 1);
}
function isNumberKey(evt)
{
    $return = true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
            && (charCode < 48 || charCode > 57))
        $return = false;
    $val = $(evt.originalTarget).val();
    if (charCode == 46) {
        if (count_appearance($val, '.') > 0) {
            $return = false;
        }
        if ($val.length == 0) {
            $return = false;
        }
    }
    return $return;
}

Autorise uniquement ce format: 123123123 [.121213]

Démo ici démo

— Babesh Florin
source
0

J'espère que cela fonctionnera pour vous.

<input type="text" onkeypress="return chkNumeric(event)" />

<script>
    function chkNumeric(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            if (charCode == 46) { return true; }
            else { return false; }
        }
        return true;
    }
</script>
— Ankur Kumar
source
0

Le code suivant a fonctionné pour moi

La zone de saisie avec l'événement "onkeypress" comme suit

<input type="text" onkeypress="return isNumberKey(this,event);" />

La fonction "isNumberKey" est la suivante

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    //Check if the text already contains the . character
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}
Développer l'extrait

— Bharat Jain
source
0

J'ai observé que pour toutes les réponses fournies ici, les choses ne fonctionnent pas si nous sélectionnons une partie du texte dans la zone de texte et essayons d'écraser cette partie. J'ai donc modifié la fonction qui est comme ci-dessous:

    <HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
         var charCode = (evt.which) ? evt.which : event.keyCode;

if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
        return false;
}
 if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
    {

        return false;

    } 

 if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
    {
          return true;
    }

  if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
  {

     return false;
  }


    return true;
       }


       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>
— Abhishek Gahlout
source
0

Pour les nombres décimaux et autorisant également les nombres négatifs avec 2 places pour les décimales après le point ... J'ai modifié la fonction pour:

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }
— Chris Rosete
source
0

Une autre façon de restreindre l'entrée à une zone de texte afin qu'elle n'accepte que des nombres et la virgule décimale consiste à utiliser du javascript dans l'entrée html. Cela fonctionne pour moi:

<input type="text" class="form-control" id="price" name="price" placeholder="Price" 
vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">

--Accepte--

9

9,99

--N'accepte pas--

9,99,99

abc

— mpalencia
source
0 
function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46)
    {    
        return true;  
    }

    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {   
        return false; 
    }
    return true;
}

Il n'autorisera que numérique et vous permettra de mettre "." pour décimal.

— Kal-El
source
0 
<script type="text/javascript">

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }

</script>
@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})

Cela fonctionne très bien.

— banny
source
0

Meilleure solution de travail avec un exemple de démonstration en direct Pure-Javascript: https://jsfiddle.net/manoj2010/ygkpa89o/ 

<script>
function removeCommas(nStr) {
    if (nStr == null || nStr == "")
        return ""; 
    return nStr.toString().replace(/,/g, "");
}

function NumbersOnly(myfield, e, dec,neg)
{        
    if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
        return false;
    }
    var allowNegativeNumber = neg || false;
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;
    keychar = String.fromCharCode(key);
    var srcEl = e.srcElement ? e.srcElement : e.target;    
    // control keys
    if ((key == null) || (key == 0) || (key == 8) ||
                (key == 9) || (key == 13) || (key == 27))
        return true;

    // numbers
    else if ((("0123456789").indexOf(keychar) > -1))
        return true;

    // decimal point jump
    else if (dec && (keychar == ".")) {
        //myfield.form.elements[dec].focus();
        return srcEl.value.indexOf(".") == -1;        
    }

    //allow negative numbers
    else if (allowNegativeNumber && (keychar == "-")) {    
        return (srcEl.value.length == 0 || srcEl.value == "0.00")
    }
    else
        return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />
Développer l'extrait

— Manoj Prajapat
source
0

Travailler moi-même sur la question, et c'est ce que j'ai jusqu'à présent. Cela fonctionne plus ou moins, mais il est impossible d'ajouter des moins par la suite en raison du nouveau contrôle de valeur. N'autorise pas non plus la virgule comme séparateur de mille, uniquement décimal.

Ce n'est pas parfait, mais cela pourrait donner quelques idées. 

app.directive('isNumber', function () {
            return function (scope, elem, attrs) {
                elem.bind('keypress', function (evt) {
                    var keyCode = (evt.which) ? evt.which : event.keyCode;
                    var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces
                    var regex = /^\-?\d+((\.|\,)\d+)?$/;                        
                    var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators             

                   //allows numbers, separators and controll keys and rejects others
                    if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {             
                        //test the string with regex, decline if doesn't fit
                        if (elem[0].value != "" && !regex.test(testValue)) {
                            event.preventDefault();
                            return false;
                        }
                        return true;
                    }
                    event.preventDefault();
                    return false;
                });
            };
        });

Permet:

11 11 .245 (dans le contrôleur formaté sur flou à 1111.245)

11,44

-123.123

-1 014

0123 (formaté sur flou à 123)

ne permet pas:

! @ # $ / *

abc

11.11.1

11,11,1

0,42

— Jane Doe
source
0 
<input type="text" onkeypress="return isNumberKey(event,this)">

<script>
   function isNumberKey(evt, obj) {

            var charCode = (evt.which) ? evt.which : event.keyCode
            var value = obj.value;
            var dotcontains = value.indexOf(".") != -1;
            if (dotcontains)
                if (charCode == 46) return false;
            if (charCode == 46) return true;
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }


</script>
— Karthik
source
0

Je sais que cette question est très ancienne, mais nous avons encore souvent de telles exigences. Il existe de nombreux exemples, mais beaucoup semblent trop verbeux ou complexes pour une simple implémentation.

Consultez ce https://jsfiddle.net/vibs2006/rn0fvxuk/ et améliorez-le (si vous le pouvez). Il fonctionne sur IE, Firefox, Chrome et Edge Browser.

Voici le code de travail. 

        
        function IsNumeric(e) {
        var IsValidationSuccessful = false;
        console.log(e.target.value);
        document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
        //console.log("e.Key Value = "+e.key);
        switch (e.key)
         {         
             case "1":
             case "2":
             case "3":
             case "4":
             case "5":
             case "6":
             case "7":
             case "8":
             case "9":
             case "0":
             case "Backspace":             
                 IsValidationSuccessful = true;
                 break;
                 
						 case "Decimal":  //Numpad Decimal in Edge Browser
             case ".":        //Numpad Decimal in Chrome and Firefox                      
             case "Del": 			// Internet Explorer 11 and less Numpad Decimal 
                 if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
                 {
                     IsValidationSuccessful = false;
                 }
                 else
                 {
                     IsValidationSuccessful = true;
                 }
                 break;

             default:
                 IsValidationSuccessful = false;
         }
         //debugger;
         if(IsValidationSuccessful == false){
         
         document.getElementById("error").style = "display:Block";
         }else{
         document.getElementById("error").style = "display:none";
         }
         
         return IsValidationSuccessful;
        }
Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
    <div id="info"></div>
Développer l'extrait

— vibs2006
source
0 
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Vous pouvez restreindre les valeurs à saisir par l'utilisateur en spécifiant la plage de valeurs ASCII.
Exemple : 48 à 57 pour les valeurs numériques (0 à 9)

— SHASHANK PUJARI
source
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.