首頁 > 開發者 > JavaScript
基於jQuery實現文字框只能輸入數字(小數、整數)，jquery文字框
在實際應用中，文字框中有時候只能夠允許輸入整數，但是有時候可能更為"博愛"一點，可以允許輸入浮點數，下面就通過執行個體代碼介紹一下如何利用jquery實現文字框只能輸入小數，代碼如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.bkjia.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(/[^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.bkjia.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()函數利用Regex，將非數字內容替換為空白。
4.bind("paste",function(){$(this).val($(this).val().replace(/\D|^0/g,''));})，註冊paste事件處理含糊，當然這裡使用的是鏈式調用，它可以防止使用者使用ctrl+v方式複製黏貼。
以上代碼寫的比較簡單，部分痛點給大家附有注釋，相信對大家有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
