webentwicklung-frage-antwort-db.com.de

Erlaube nur Zahlen und Punkte im Skript

Ich benutze dieses Javascript, um Benutzer einzuschränken, nur Zahlen und nur einen Punkt als Dezimaltrennzeichen einzugeben.

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

Das Ereignis onkeypress (this) gibt jedoch an dieser Stelle einen Objektfehler in dieser Funktion zurück

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

Was ist mein Fehler hier? 

javascriptasp.netregexvalidation
15
itzArun

Anstatt dies zu benutzen:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

Sie sollten dies verwenden:

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

8
Vishal Patel

Hier können Sie reguläre Ausdrücke verwenden.

Durch Verwendung eines regulären Ausdrucks können Sie mit den gesamten Code durch nur eine Zeile ersetzen.

Sie können die folgenden regex​​_ verwenden, um Ihre Anforderungen zu überprüfen:

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

Mit anderen Worten: null oder mehr numerische Zeichen, gefolgt von null oder einer oder mehreren Punkten, gefolgt von null oder mehr numerischen Zeichen.

Sie können Ihren Code damit ersetzen:

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

Dieser Code kann Ihre gesamte Funktion ersetzen! 

Beachten Sie, dass Sie den Punkt mit einem Backslash (es steht für 'beliebiges Zeichen') stehen müssen.

Weitere Informationen zur Verwendung regulärer Ausdrücke mit Javascript finden Sie hier:

Sie können den obigen Regex auch hier testen:

Erklärung des oben verwendeten Regex:

  • Die Klammern bedeuten "jedes Zeichen innerhalb dieser Klammern." Sie können einen Bindestrich (wie oben) verwenden, um einen Zeichenbereich anzugeben. 

  • Der * bedeutet "null oder mehr des vorherigen Ausdrucks."

  • [0-9]* bedeutet "null oder mehr Zahlen"

  • Der umgekehrte Schrägstrich wird als Escape-Zeichen für die Periode verwendet, da die Periode normalerweise für "beliebiges Zeichen" steht. 

  • Der ? bedeutet "null oder eines der vorherigen Zeichen."

  • Der ^ steht für den Anfang einer Zeichenfolge.

  • Der $ repräsentiert das Ende einer Zeichenfolge.

  • Wenn Sie den regulären Ausdruck mit ^ starten und mit $ beenden, wird sichergestellt, dass die Zeichenfolge gesamt dem Regex-Muster entspricht.

Hoffe das hilft!

35
jahroy

Verwenden Sie stattdessen Jquery. Fügen Sie Ihrem Textfeld eine Dezimalklasse hinzu:

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

Verwenden Sie diesen Code in Ihrer JS. Es wird nach mehreren Dezimalstellen gesucht und Benutzer dürfen nur Zahlen eingeben.

$('.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); 
});​

Überprüfen Sie diese Geige: http://jsfiddle.net/2YW8g/

Ich hoffe es hilft.

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

Fügen Sie einfach den folgenden Code in Ihren Eingabetext ein:

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

Ich denke, diese einfache Lösung kann sein. 

2
Vishal Viradiya

Das funktioniert am besten für mich.

Ich wende auch einen Währungsformatierer auf Unschärfe an, bei dem der Dezimalteil auf 2 Stellen gerundet wird, nur für den Fall, dass er mit parseFloat validiert wurde.

Die Funktionen, die die Cursorposition abrufen und festlegen, stammen aus dem Blog von Vishal Monpara. Ich mache auch ein paar nette Sachen mit diesen Funktionen. Sie können auf einfache Weise 2 Codeblöcke entfernen, bei denen 2 Dezimalstellen gezwungen werden, wenn Sie möchten, und die Set/Get-Caret-Funktionen loswerden.

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

sie sollten diese Funktion verwenden und die Eigenschaften dieses Elements schreiben.

HTML Quelltext: 

<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

Versuchen Sie dies für mehrere Textfelder (mit dem Klassenselektor):

Hier klicken zum Beispiel ..

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

versuchen Sie diesen 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

Sie können dies verwenden

Javascript

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

Verwendung

 <input onkeypress="return isNumber(event)" class="form-control">
0
Vignesh Subramanian

Diese Funktion verhindert die Eingabe von anderen Zeichen als Zahlen und einem einzelnen Punkt.

function validateQty(el, evt) {
   var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode != 45 && charCode != 8 && (charCode != 46) && (charCode < 48 || charCode > 57))
        return false;
    if (charCode == 46) {
        if ((el.value) && (el.value.indexOf('.') >= 0))
            return false;
        else
            return true;
    }
    return true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = evt.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
};
<input type="text" onkeypress='return validateQty(this,event);'>
0
Mohammed Azhar Ali