規定文字框只能夠輸入整數程式碼例項

antzone發表於2017-04-18

有時候可能需要規定文字框內容只能夠輸入整數，下面給出一段能夠實現此功能的程式碼例項，供需要的朋友參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){     
  $(".NumText").keyup(function(){    
    $(this).val($(this).val().replace(/\D|^0/g,''));  
  }).bind("paste",function(){
    $(this).val($(this).val().replace(/\D|^0/g,''));     
  })
});  
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

以上程式碼實現了預期的要求，文字框中只能夠輸入整數，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$(".NumText").keyup(function(){})，為文字框註冊keyup事件處理函式。

3.$(this).val($(this).val().replace(/\D|^0/g,''))，通過replace()函式利用正規表示式，將非數字內容替換為空。

4.bind("paste",function(){$(this).val($(this).val().replace(/\D|^0/g,''));})，註冊paste事件處理含糊，當然這裡使用的是鏈式呼叫，它可以防止使用者使用ctrl+v方式複製黏貼。

二.相關閱讀:

1.keyup事件可以參閱jQuery keyup事件一章節。

2.val()函式可以參閱jQuery val()方法一章節。 

3.replace()函式可以參閱正規表示式replace()函式一章節。 

4.paste事件可以參閱jquery paste事件一章節。 

相關文章