在脚本中只允许数字和点

Am using this javascript for restrict users to type only numbers and only one dot as decimal separator.

我使用这个javascript来限制用户只输入数字和一个点作为十进制分隔符。

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

But the onkeypress(this) event returns object required error in that function at this place

但是onkeypress(this)事件返回该函数在此位置的所需错误

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

What's my mistake here?

我的错误是什么?

13 个解决方案

#1

Instead of using this:

而不是使用:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

onkeypress = "返回fun_AllowOnlyAmountAndDot(这);“

You should use this:

你应该用这个:

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

onkeypress = "返回fun_AllowOnlyAmountAndDot(this.id);“

#2

This is a great place to use regular expressions.

这是一个使用正则表达式的好地方。

By using a regular expression, you can replace all that code with just one line.

通过使用正则表达式，您可以用一行代码替换所有代码。

You can use the following regex to validate your requirements:

您可以使用以下regex来验证您的需求:

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

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

In other words: zero or more numeric characters, followed by zero or one period(s), followed by zero or more numeric characters.

换句话说:0或更多的数字字符，后面是0或1个周期，后面是0或更多的数字字符。

You can replace your code with this:

您可以用以下代码替换您的代码:

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

That code can replace your entire function!

该代码可以替换整个函数!

Note that you have to escape the period with a backslash (otherwise it stands for 'any character').

注意，您必须使用反斜杠来转义句号(否则它表示“任何字符”)。

For more reading on using regular expressions with javascript, check this out:

要了解更多关于在javascript中使用正则表达式的信息，请查看以下内容:

http://www.regular-expressions.info/javascript.html
http://www.regular-expressions.info/javascript.html

You can also test the above regex here:

您也可以在这里测试上面的regex:

http://www.regular-expressions.info/javascriptexample.html
http://www.regular-expressions.info/javascriptexample.html

Explanation of the regex used above:

上述regex的解释:

The brackets mean "any character inside these brackets." You can use a hyphen (like above) to indicate a range of chars.

括号表示“括号内的任何字符”。您可以使用连字符(如上所示)来指示一系列字符。
The * means "zero or more of the previous expression."

*表示“前一个表达式的0或更多”。
[0-9]* means "zero or more numbers"

[0-9]*表示“零或多个数字”
The backslash is used as an escape character for the period, because period usually stands for "any character."

反斜杠用作句点的转义字符，因为句点通常代表“任何字符”。
The ? means "zero or one of the previous character."

的吗?意思是“零或前一个字符。”
The ^ represents the beginning of a string.

^代表一个字符串的开始。
The $ represents the end of a string.

$表示字符串的结束。
Starting the regex with ^ and ending it with $ ensures that the entire string adheres to the regex pattern.

开始regex ^和结束它与美元确保整个字符串坚持正则表达式模式。

Hope this helps!

希望这可以帮助!

#3

Use Jquery instead. Add a decimal class to your textbox:

使用Jquery来代替。向你的文本框中添加一个十进制类:

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

Use this code in your JS. It checks for multiple decimals and also restrict users to type only numbers.

在JS中使用此代码。它检查多个小数，并限制用户只输入数字。

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

Check this fiddle: http://jsfiddle.net/2YW8g/

检查这个小提琴:http://jsfiddle.net/2YW8g/

Hope it helps.

希望它可以帮助。

#4

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>

#5

This works best for me.

这对我最有效。

I also apply a currency formatter on blur where the decimal part is rounded at 2 digits just in case after validating with parseFloat.

我还在blur中应用了一个货币格式化程序，小数点在2位上四舍五入，以防在使用parseFloat验证之后。

The functions that get and set the cursor position are from Vishal Monpara's blog. I also do some nice stuff on focus with those functions. You can easily remove 2 blocks of code where 2 decimals are forced if you want and get rid of the set/get caret functions.

获取和设置光标位置的函数来自Vishal Monpara的博客。我也会用这些函数来做一些不错的事情。你可以很容易地删除2块代码，如果你想要的话，可以强制执行2个小数，并删除set/get插入符号函数。

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

#6

Just add the code below in your input text:

只需在输入文本中添加以下代码:

onkeypress='return event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)'

#7

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

#8

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

you should use this function and write the properties of this element ;

您应该使用这个函数并编写这个元素的属性;

HTML Code:

HTML代码:

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

#9

<input type="text" class="decimal" value="" />
$('.decimal').keypress(function(evt){
    return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key);
});

I think this simple solution may be.

我认为这个简单的解决办法可能是。

#10

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

#11

Try this for multiple text fileds (using class selector):

对于多个文本文件(使用类选择器)尝试此操作:

Click here for example..

点击这里为例。

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>

#12

This function will prevent entry of anything other than numbers and a single dot.

这个函数将阻止除了数字和一个点之外的任何输入。

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

#13

-2

 <input type="text" class="form-control" id="odometer_reading" name="odometer_reading"  placeholder="Odometer Reading" onblur="odometer_reading1();" onkeypress='validate(event)' required="" />
<script>
                function validate(evt) {
                  var theEvent = evt || window.event;
                  var key = theEvent.keyCode || theEvent.which;
                  key = String.fromCharCode( key );
                  var regex = /[0-9]|\./;
                  if( !regex.test(key) ) {
                    theEvent.returnValue = false;
                    if(theEvent.preventDefault) theEvent.preventDefault();
                  }
                }
            </script>

#1