在實(shí)際應(yīng)用中,文本框中有時候只能夠允許輸入整數(shù),但是有時候可能更為"博愛"一點(diǎn),可以允許輸入浮點(diǎn)數(shù),下面就通過實(shí)例代碼介紹一下如何利用jquery實(shí)現(xiàn)文本框只能輸入小數(shù),代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gimoo.net/" /> <title>綠夏網(wǎng)</title> <script type="text/javascript" src="http://www.gimoo.net/t/1904/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>
以上代碼實(shí)現(xiàn)了我們的要求,文本框中只能夠輸入整數(shù)或者浮點(diǎn)數(shù),代碼比較簡單這里就不多介紹了。
下面給大家介紹如何利用jquery實(shí)現(xiàn)文本框只能夠輸入整數(shù):
有時候可能需要規(guī)定文本框內(nèi)容只能夠輸入整數(shù),下面給出一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例,供需要的朋友參考。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gimoo.net" /> <title>綠夏網(wǎng)</title> <script type="text/javascript" src="http://www.gimoo.net/t/1904/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>
以上代碼實(shí)現(xiàn)了預(yù)期的要求,文本框中只能夠輸入整數(shù),下面介紹一下它的實(shí)現(xiàn)過程。
代碼注釋:
1.$(function(){}),當(dāng)文檔結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。
2.$(".NumText").keyup(function(){}),為文本框注冊keyup事件處理函數(shù)。
3.$(this).val($(this).val().replace(/D|^0/g,'')),通過replace()函數(shù)利用正則表達(dá)式,將非數(shù)字內(nèi)容替換為空。
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));}),注冊paste事件處理含糊,當(dāng)然這里使用的是鏈?zhǔn)秸{(diào)用,它可以防止用戶使用ctrl+v方式復(fù)制黏貼。
以上代碼寫的比較簡單,部分難點(diǎn)給大家附有注釋,相信對大家有所幫助。