限制文字框只能夠輸入數字程式碼例項

admin發表於2017-02-22

有時候需要限制文字框只能夠輸入數字，本章節提供一段程式碼例項供大家參考之用。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>螞蟻部落歡迎您</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //敲擊按鍵時觸發
  $("#Score").bind("keypress",function(event){
    var getValue = $(this).val();
    //控制第一個不能輸入小數點"."
    if (getValue.length == 0 && event.which == 46) {
      event.preventDefault();
      return;
    }
    //控制只能輸入一個小數點"."
    if(getValue.indexOf('.') != -1 && event.which == 46) {
      event.preventDefault();
      return;
    }
    //控制只能輸入的值
    if(event.which && (event.which < 48 || event.which > 57) && event.which != 8 && event.which != 46){
      event.preventDefault();
      return;
    }
   })
   //失去焦點是觸發
   $("#Score").bind("blur", function(event) {
      var value = $(this).val(), reg = /\.$/;
      if (reg.test(value)) {
       value = value.replace(reg, "");
       $(this).val(value);
      }
   })
})
</script>
</head>
<body>
<input type="text" id="Score" />
</body>
</html>

以上程式碼可以限制文字框中只能夠輸入數值，需要的朋友可以參考一下。

相關文章