jQuery使用正則表達(dá)式限制文本框只能輸入數(shù)字
網(wǎng)站中的一個(gè)小功能:要求用戶只能輸入16位數(shù)字。
試過javascript的方法:
如:一種方法:
//只允許輸入數(shù)字 function checkkey2(value, e) { var key = window.event ? e.keyCode : e.which; if ((key > 95 && key < 106) || (key > 47 && key < 60)) { } else if (key != 8) { if (window.event) //IE { e.returnValue = false; } else //Firefox { e.preventDefault(); } }; };
另一種方法:
用正則表達(dá)式限制只能輸入數(shù)字:
onkeyup="value=value.replace(/[^/d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"
上面的兩種方法我均用過,但多少都會(huì)出現(xiàn)一些問題,比如瀏覽器的兼容性問題,不能達(dá)到想要的效果等,所以,最后還是考慮用正則來自己寫。
直接貼代碼了,很簡單的正則表達(dá)式:
<head> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" /> <title></title> <!-- http://www.cnblogs.com/babycool --> <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#xxxxxx").keyup(function () { //如果輸入非數(shù)字,則替換為'',如果輸入數(shù)字,則在每4位之后添加一個(gè)空格分隔 this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 "); }) }); </script> </head> <body> 限制只能輸入19個(gè)字符 <input id="xxxxxx" type="text" name="name" value="" maxlength="19" /> <br /> <br /> 輸入非數(shù)字替換為'' <input type="text" name="name" value="" onkeyup="value=value.replace(/[^\d]/g,'')" /> <br /> <br /> </body>
頁面效果:
瀏覽器的兼容性:
我在IE7.8.9.10下,firefox,chrome下測試均可以。
以上就是本文的全部內(nèi)容,希望這個(gè)方法也能給遇到相同問題的其他人帶來幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery EasyUI的添加,修改,刪除,查詢等基本操作介紹
初識Jquery EasyUI看了一些博主用其開發(fā)出來的項(xiàng)目,頁面很炫,感覺功能挺強(qiáng)大,效果也挺不錯(cuò),最近一直想系統(tǒng)學(xué)習(xí)一套前臺控件,于是在網(wǎng)上找了一些參考示例2013-10-10jQuery實(shí)現(xiàn)的手風(fēng)琴側(cè)邊菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的手風(fēng)琴側(cè)邊菜單效果,涉及jQuery事件響應(yīng)及元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03JQuery基于FormData異步提交數(shù)據(jù)文件
這篇文章主要介紹了JQuery基于FormData異步提交數(shù)據(jù)文件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09jquery 學(xué)習(xí)之二 屬性(html()與html(val))
取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。2010-11-11Jquery Ajax學(xué)習(xí)實(shí)例3 向WebService發(fā)出請求,調(diào)用方法返回?cái)?shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例3 向WebService發(fā)出請求,調(diào)用方法返回?cái)?shù)據(jù)2010-03-03