首頁 > web前端 > js教程 > 基於jQuery實作文字方塊只能輸入數字(小數、整數)_jquery

基於jQuery實作文字方塊只能輸入數字(小數、整數)_jquery

WBOY
發布: 2016-05-16 15:20:04
原創
1212 人瀏覽過

在實際應用中,文字方塊中有時候只能夠允許輸入整數,但是有時可能更為"博愛"一點,可以允許輸入浮點數,下面就透過實例程式碼介紹一下如何利用jquery實現文字方塊只能輸入小數,代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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(/[^0-9.]/g,'')); 
}).bind("paste",function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>
登入後複製

以上程式碼實現了我們的要求,文字方塊只能夠輸入整數或浮點數,程式碼比較簡單這裡就不多介紹了。

下面要跟大家介紹如何利用jquery實作文字方塊只能夠輸入整數:

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

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net" />
<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方式複製貼上。

以上程式碼寫的比較簡單,部分困難給大家附有註釋,相信對大家有幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板