只允許在腳本中使用數字和點

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

這裏有什麼我的錯對象，因爲功能所需的錯誤？

來源

2012-03-21 itzArun

不阻止複製和粘貼:( – MobileMon 2014-02-26 16:06:29

你可以試試這個：onkeypress事件= 「返回fun_AllowOnlyAmountAndDot（事件）;」 – elfekz 2017-08-09 09:19:36

而不是使用這個的：

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

你應該使用這樣的：

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

來源

2012-03-21 07:37:14

這一個工作。非常感謝。 – itzArun 2012-03-21 11:19:42

這是一個使用正則表達式的好地方。

通過使用正則表達式，您可以用一行代替所有代碼。

您可以使用以下正則表達式來驗證您的要求：

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

換句話說：零個或多個數字字符，後跟零個或一個週期（S），其次是零或更多數字字符。

你可以用這個代替代碼：

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

該代碼可以取代你的整個功能！

請注意，您必須用反斜槓（否則它代表「任何字符」）跳過句點。

有關使用JavaScript的正則表達式多看書，檢查了這一點：

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

您還可以測試上述正則表達式在這裏：

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

正則表達式的解釋上文使用：

括號表示「這些托架內的任何字符。」你可以使用連字符（如上）來表示一個字符範圍。
*的意思是「零個或多個以前的表達」。
[0-9]*指「零個或多個號碼」
反斜槓用作期間轉義字符，因爲期通常代表「任何字符。「
的?手段」 零或前一個字符之一「。
的^表示一個字符串的開頭。
的$表示字符串的結束。
以^開始正則表達式，並以$結束，確保整個字符串遵循正則表達式模式。

希望這有助於！

來源

2012-03-21 06:23:18 jahroy

感謝。讓我試試正則表達式 – itzArun 2012-03-21 11:20:44

匹配（）應該是match（）？ – 2015-05-29 10:21:35

^是的...謝謝！ – jahroy 2015-05-30 05:57:51

改爲使用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/

希望它能幫助。

來源

2012-03-21 06:36:12 nickalchemist

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

來源

2012-06-20 18:58:07

發佈解決方案很好，但如果您描述或強調錯誤是什麼，它可能會改善您的答案。 – Smamatti 2012-10-20 12:34:05

這對我最適合。

我也在模糊處應用貨幣格式化程序，其中小數部分以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>

來源

2012-09-06 05:53:13 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; 
}

你應該使用這個功能，寫這個元素的屬性;

HTML代碼：

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

來源

2013-09-11 08:25:34 Serkan

此功能將防止數字以外的任何東西，一個點條目。

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

來源

2015-11-19 14:09:22

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>

來源

2015-12-22 11:36:38

請解釋你做了什麼。 – 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>

來源

2016-03-19 09:46:39

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

我覺得這個簡單的解決方案而定。

來源

2016-09-09 09:08:25

工作很好。我找到的最簡單有效的解決方案，謝謝 – RDev 2016-12-10 20:24:33

試試這個代碼

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>

來源

2016-12-08 09:24:44 sai

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

（使用類選擇）試試這個多文本的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>

來源

2016-12-08 10:13:37

只需添加下面的代碼在你輸入文本：

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

來源

2017-03-03 09:10:54

只允許在腳本中使用數字和點

回答

相關問題