2012-03-21 43 views
14

正在使用此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> 

但onkeypress事件(这个)活动的回报,在这个地方

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

这里有什么我的错对象,因为功能所需的错误?

+0

不阻止复制和粘贴:( – MobileMon 2014-02-26 16:06:29

+0

你可以试试这个:onkeypress事件= “返回fun_AllowOnlyAmountAndDot(事件);” – elfekz 2017-08-09 09:19:36

回答

7

而不是使用这个的:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

你应该使用这样的:

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

+0

这一个工作。非常感谢。 – itzArun 2012-03-21 11:19:42

29

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

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

您可以使用以下正则表达式来验证您的要求:

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

换句话说:零个或多个数字字符,后跟零个或一个周期(S),其次是零或更多数字字符。

你可以用这个代替代码:

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

该代码可以取代你的整个功能!

请注意,您必须用反斜杠(否则它代表“任何字符”)跳过句点。

有关使用JavaScript的正则表达式多看书,检查了这一点:

您还可以测试上述正则表达式在这里:


正则表达式的解释上文使用:

  • 括号表示 “这些托架内的任何字符。”你可以使用连字符(如上)来表示一个字符范围。

  • *的意思是“零个或多个以前的表达”。

  • [0-9]*指“零个或多个号码

  • 反斜杠用作期间转义字符,因为期通常代表“任何字符。“

  • ?手段” 零或前一个字符之一“。

  • ^表示一个字符串的开头。

  • $表示字符串的结束。

  • ^开始正则表达式,并以$结束,确保整个字符串遵循正则表达式模式。

希望这有助于!

+0

感谢。让我试试正则表达式 – itzArun 2012-03-21 11:20:44

+0

匹配()应该是match()? – 2015-05-29 10:21:35

+0

^是的...谢谢! – jahroy 2015-05-30 05:57:51

11

改为使用jquery。在您的文本框中添加小数类:

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

在您的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); 
});​ 

检查此琴:http://jsfiddle.net/2YW8g/

希望它能帮助。

1

<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

发布解决方案很好,但如果您描述或强调错误是什么,它可能会改善您的答案。 – Smamatti 2012-10-20 12:34:05

2

这对我最适合。

我也在模糊处应用货币格式化程序,其中小数部分以2位数进行舍入,以防在使用parseFloat进行验证之后。

获取和设置光标位置的函数来自Vishal Monpara的博客。我也做了一些关于这些功能的好东西。如果需要,可以轻松移除2个小数点代码,并强制设置2个小数点并取消设置/获取插入符号功能。

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

你应该使用这个功能,写这个元素的属性;

HTML代码:

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

此功能将防止数字以外的任何东西,一个点条目。

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

3

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

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

+1

请解释你做了什么。 – Sam 2015-12-22 11:46: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
<input type="text" class="decimal" value="" /> 
$('.decimal').keypress(function(evt){ 
    return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key); 
}); 

我觉得这个简单的解决方案而定。

+0

工作很好。我找到的最简单有效的解决方案,谢谢 – RDev 2016-12-10 20:24:33

1

试试这个代码

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>

+0

Nice Work,Keep code – 2016-12-08 09:43:46

1

(使用类选择)试试这个多文本的Fileds:

Click here for example..

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

 
\t function addListener(list){ 
 
\t \t for(var i=0;i<list.length;i++){ 
 
    \t \t list[i].addEventListener('keypress',checking); 
 
    \t } 
 
\t } 
 
\t var classList = document.getElementsByClassName('number'); 
 
\t 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

只需添加下面的代码在你输入文本:

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