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

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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la source

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

Réponses: