web-dev-qa-db-fra.com

Autoriser uniquement les nombres et les points dans le script

J'utilise ce javascript pour limiter les utilisateurs à ne taper que des nombres et un seul point comme séparateur décimal.

<script type="text/javascript">
 function fun_AllowOnlyAmountAndDot(txt)
        {
            if(event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46)
            {
               var txtbx=document.getElementById(txt);
               var amount = document.getElementById(txt).value;
               var present=0;
               var count=0;

               if(amount.indexOf(".",present)||amount.indexOf(".",present+1));
               {
              // alert('0');
               }

              /*if(amount.length==2)
              {
                if(event.keyCode != 46)
                return false;
              }*/
               do
               {
               present=amount.indexOf(".",present);
               if(present!=-1)
                {
                 count++;
                 present++;
                 }
               }
               while(present!=-1);
               if(present==-1 && amount.length==0 && event.keyCode == 46)
               {
                    event.keyCode=0;
                    //alert("Wrong position of decimal point not  allowed !!");
                    return false;
               }

               if(count>=1 && event.keyCode == 46)
               {

                    event.keyCode=0;
                    //alert("Only one decimal point is allowed !!");
                    return false;
               }
               if(count==1)
               {
                var lastdigits=amount.substring(amount.indexOf(".")+1,amount.length);
                if(lastdigits.length>=2)
                            {
                              //alert("Two decimal places only allowed");
                              event.keyCode=0;
                              return false;
                              }
               }
                    return true;
            }
            else
            {
                    event.keyCode=0;
                    //alert("Only Numbers with dot allowed !!");
                    return false;
            }

        }

    </script>

<td align="right">
<asp:TextBox ID="txtQ1gTarget" runat="server" Width="30px" CssClass="txtbx" MaxLength="6" onkeypress="return fun_AllowOnlyAmountAndDot(this);"></asp:TextBox>
</td>

Mais l'événement onkeypress (this) renvoie l'erreur requise d'objet dans cette fonction à cet endroit.

var amount = document.getElementById(txt).value;

Quelle est mon erreur ici? 

javascriptasp.netregexvalidation
15
itzArun

Au lieu d'utiliser ceci:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

Vous devriez utiliser ceci:

onkeypress="return fun_AllowOnlyAmountAndDot(this.id);"

8
Vishal Patel

C'est un excellent endroit pour utiliser des expressions régulières.

En utilisant une expression régulière, vous pouvez remplacer tout ce code par une seule ligne.

Vous pouvez utiliser les regex​​_ suivants pour valider vos exigences:

[0-9]*\.?[0-9]*

En d'autres termes: zéro ou plusieurs caractères numériques, suivis de zéro ou une période, suivis de zéro ou de caractères numériques.

Vous pouvez remplacer votre code avec ceci:

function validate(s) {
    var rgx = /^[0-9]*\.?[0-9]*$/;
    return s.match(rgx);
}

Ce code peut remplacer votre fonction entière! 

Notez que vous devez échapper à la période avec une barre oblique inverse (sinon, cela signifie "n'importe quel caractère").

Pour en savoir plus sur l'utilisation d'expressions régulières avec JavaScript, consultez cette page:

Vous pouvez également tester la regex ci-dessus ici:

Explication de l'expression régulière utilisée ci-dessus:

  • Les crochets signifient "n'importe quel caractère à l'intérieur de ces crochets". Vous pouvez utiliser un trait d'union (comme ci-dessus) pour indiquer une plage de caractères. 

  • Le * signifie "zéro ou plus de l'expression précédente.".

  • [0-9]* signifie "zéro ou plusieurs chiffres"

  • La barre oblique inverse est utilisée comme caractère d'échappement pour la période, car le terme "période" signifie généralement "n'importe quel caractère.". 

  • Le ? signifie "zéro ou un des caractères précédents.".

  • Le ^ représente le début d'une chaîne.

  • Le $ représente la fin d'une chaîne.

  • Commencer la regex avec ^ et le terminer par $ garantit que la chaîne entière adhère au modèle de regex.

J'espère que cela t'aides!

35
jahroy

Utilisez plutôt Jquery. Ajouter une classe décimale à votre zone de texte:

<input type="text" class="decimal" value="" />

Utilisez ce code dans votre JS. Il recherche plusieurs décimales et empêche également les utilisateurs de ne taper que des nombres.

$('.decimal').keyup(function(){
    var val = $(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) 
             val =val.replace(/\.+$/,"");
    }
    $(this).val(val); 
});​

Vérifiez ce violon: http://jsfiddle.net/2YW8g/

J'espère que ça aide.

14
nickalchemist

function isNumberKey(evt,id)
{
	try{
        var charCode = (evt.which) ? evt.which : event.keyCode;
  
        if(charCode==46){
            var txt=document.getElementById(id).value;
            if(!(txt.indexOf(".") > -1)){
	
                return true;
            }
        }
        if (charCode > 31 && (charCode < 48 || charCode > 57) )
            return false;

        return true;
	}catch(w){
		alert(w);
	}
}
<html>
  <head>
  </head>
  <body>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event,this.id)" type="text" name="txtChar">
  </body>
</html>

6
Kichu Baai

Ajoutez simplement le code ci-dessous dans votre texte de saisie:

onkeypress='return event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)'
5
Gua Syed
<input type="text" class="decimal" value="" />
$('.decimal').keypress(function(evt){
    return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key);
});

Je pense que cette solution simple peut être. 

2
Vishal Viradiya

Cela fonctionne mieux pour moi.

J'applique également un formateur de devise sur le flou où la partie décimale est arrondie à 2 chiffres, juste au cas où après avoir validé avec parseFloat.

Les fonctions qui obtiennent et définissent la position du curseur proviennent du blog de Vishal Monpara. Je fais aussi des choses intéressantes sur ces fonctions. Vous pouvez facilement supprimer 2 blocs de code où 2 décimales sont forcées si vous le souhaitez et vous débarrasser des fonctions set/get caret.

<html>
<body>
<input type="text" size="30" maxlength="30" onkeypress="return numericValidation(this,event);" />
<script language="JavaScript">
    function numericValidation(obj,evt) {
        var e = event || evt; // for trans-browser compatibility

        var charCode = e.which || e.keyCode;        

        if (charCode == 46) { //one dot
            if (obj.value.indexOf(".") > -1)
                return false;
            else {
                //---if the dot is positioned in the middle give the user a surprise, remember: just 2 decimals allowed
                var idx = doGetCaretPosition(obj);
                var part1 = obj.value.substr(0,idx),
                    part2 = obj.value.substring(idx);

                if (part2.length > 2) {
                    obj.value = part1 + "." + part2.substr(0,2);
                    setCaretPosition(obj, idx + 1);
                    return false;
                }//---

                //allow one dot if not cheating
                return true;
            }
        }
        else if (charCode > 31 && (charCode < 48 || charCode > 57)) { //just numbers
            return false;
        }

        //---just 2 decimals stubborn!
        var arr = obj.value.split(".") , pos = doGetCaretPosition(obj);

        if (arr.length == 2 && pos > arr[0].length && arr[1].length == 2)                               
            return false;
        //---

        //ok it's a number
        return true;
    }

    function doGetCaretPosition (ctrl) {
        var CaretPos = 0;   // IE Support
        if (document.selection) {
        ctrl.focus ();
            var Sel = document.selection.createRange ();
            Sel.moveStart ('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        }
        // Firefox support
        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
            CaretPos = ctrl.selectionStart;
        return (CaretPos);
    }

    function setCaretPosition(ctrl, pos){
        if(ctrl.setSelectionRange)
        {
            ctrl.focus();
            ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }
</script>
</body>
</html>
2
Gauss
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 46 || charCode > 57)) {
        return false;
    }
    return true;
}

vous devriez utiliser cette fonction et écrire les propriétés de cet élément;

Code HTML: 

<input id="deneme" data-mini="true" onKeyPress="return isNumber(event)" type="text"/>`
1
Serkan

<script type="text/javascript">
    function numericValidation(txtvalue) {
        var e = event || evt; // for trans-browser compatibility
        var charCode = e.which || e.keyCode;
        if (!(document.getElementById(txtvalue.id).value))
         {
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        else {
               var val = document.getElementById(txtvalue.id).value;
            if(charCode==46 || (charCode > 31 && (charCode > 47 && charCode < 58)) )
             {
                var points = 0;            
                points = val.indexOf(".", points);                    
                if (points >= 1 && charCode == 46)
                {      
                   return false;
                }                 
                if (points == 1) 
                {
                    var lastdigits = val.substring(val.indexOf(".") + 1, val.length);
                    if (lastdigits.length >= 2)
                    {
                        alert("Two decimal places only allowed");
                        return false;
                    }
                }
                return true;
            }
            else {
                alert("Only Numarics allowed");
                return false;
            }
        }
    }

</script>
<form id="form1" runat="server">
<div>
  <asp:TextBox ID="txtHDLLevel" MaxLength="6" runat="server" Width="33px" onkeypress="return numericValidation(this);"  />
</div>
</form>

1
Ganesh Thadishetti

Essayez ceci pour plusieurs champs de texte (en utilisant le sélecteur de classe):

Cliquez ici par exemple ..

var checking = function(event){
	var data = this.value;
	if((event.charCode>= 48 && event.charCode <= 57) || event.charCode== 46 ||event.charCode == 0){
		if(data.indexOf('.') > -1){
 			if(event.charCode== 46)
  				event.preventDefault();
		}
	}else
		event.preventDefault();
	};

	function addListener(list){
		for(var i=0;i<list.length;i++){
    		list[i].addEventListener('keypress',checking);
    	}
	}
	var classList = document.getElementsByClassName('number');
	addListener(classList);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
</body>
</html>

1
Om Shankar

essayez ce code 

var check = function(evt){

var data = document.getElementById('num').value;
if((evt.charCode>= 48 && evt.charCode <= 57) || evt.charCode== 46 ||evt.charCode == 0){
if(data.indexOf('.') > -1){
 if(evt.charCode== 46)
  evt.preventDefault();
}
}else
evt.preventDefault();
};

document.getElementById('num').addEventListener('keypress',check);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="num" value="" />



</body>
</html>

1
sai