輸入框過濾非數(shù)字的js代碼
更新時(shí)間:2014年09月18日 17:21:12 投稿:whsnow
這篇文章主要介紹js過濾輸入框中非數(shù)字的字符,很簡單,但很實(shí)用,需要的朋友可以參考下
HTML:
復(fù)制代碼 代碼如下:
<input type="text" id="only"/>
JS:
window.onload=function(e){
var text=document.getElementById("only"),pattern=/\d/,//pattern匹配字母上的數(shù)字鍵
pattern2=/(9[6-9])|(10[0-5])|3(7|9)/,//pattern2匹配小鍵盤上的數(shù)字鍵和左右方向鍵
EventHandle={},event=e||window.event;//一個(gè)處理事件的對(duì)象
//當(dāng)網(wǎng)頁加載的時(shí)候,進(jìn)行判斷,對(duì)事件處理對(duì)象進(jìn)行定義屬性,這樣對(duì)事件對(duì)象的方法只需要進(jìn)行一次判斷,以后的其他事件
//處理程序里面不需要判斷
if(event.preventDefault){
EventHandle.preventDefault=function(e){
e.preventDefault();
};
}else{
EventHandle.preventDefault=function(e){
e.returnValue=false;
}
}
text.onkeydown=function(e){
var event=e||window.event;//不同事件的事件對(duì)象不一樣,這個(gè)event和最前面的event不相等
if(!pattern.test(String.fromCharCode(event.keyCode))&&event.keyCode!=8//keyCode=8是退格鍵,因?yàn)榭梢詫?duì)輸入的數(shù)字進(jìn)行修改,所以退格和左右方向鍵不禁止
&&!pattern2.test(event.keyCode.toString())||event.shiftKey||
event.ctrlKey||event.metaKey){
EventHandle.preventDefault(event);//如果不用對(duì)象的這個(gè)方法,寫成下面這樣,也可以執(zhí)行,不過每次按下鍵盤的時(shí)候都會(huì)進(jìn)行一次判斷
//這個(gè)是沒有必要的,所以在頁面加載的時(shí)候?qū)κ录幚韺?duì)象定義一個(gè)方法,加載后對(duì)象的方法就已經(jīng)是確定的了,以后時(shí)候就可以了
//if(event.preventDefault){
//event.preventDefault();
//}else{
//event.returnValue=false;
//}
}
}
}
未注釋版本:
window.onload=function(e){
var text=document.getElementById("only"),pattern=/\d/,
pattern2=/(9[6-9])|(10[0-5])|3(7|9)/,
EventHandle={},event=e||window.event;
if(event.preventDefault){
EventHandle.preventDefault=function(e){
e.preventDefault();
};
}else{
EventHandle.preventDefault=function(e){
e.returnValue=false;
}
}
text.onkeydown=function(e){
var event=e||window.event;
if(!pattern.test(String.fromCharCode(event.keyCode))&&event.keyCode!=8
&&!pattern2.test(event.keyCode.toString())||event.shiftKey||
event.ctrlKey||event.metaKey){
EventHandle.preventDefault(event);
}
}
}
在IE11里面,F(xiàn)12打開開發(fā)者工具里面可以選擇IE版本進(jìn)行調(diào)試

您可能感興趣的文章:
- JS+CSS實(shí)現(xiàn)實(shí)用的單擊輸入框彈出選擇框的方法
- js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法
- js控制輸入框獲得和失去焦點(diǎn)時(shí)狀態(tài)顯示的方法
- js去除輸入框中所有的空格和禁止輸入空格的方法
- js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
- JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼
- js輸入框郵箱自動(dòng)提示功能代碼實(shí)現(xiàn)
- JS實(shí)現(xiàn)在網(wǎng)頁中彈出一個(gè)輸入框的方法
相關(guān)文章
uniapp?APP消息推送方案實(shí)現(xiàn)全過程
前段時(shí)間開發(fā)app的時(shí)候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
js實(shí)現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果
這篇文章主要介紹了js實(shí)現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果,可實(shí)現(xiàn)在同一頁面中多次調(diào)用幻燈切換效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
ie支持function.bind()方法實(shí)現(xiàn)代碼
在 google 一番技術(shù)資料后,發(fā)現(xiàn) firefox 原生支持一個(gè) bind 方法,該方法很好的滿足了我們的初衷,調(diào)用方法與 call 和 apply 一樣,只是定義完成后,在后期調(diào)用時(shí)該方法才會(huì)執(zhí)行,需要的朋友可以了解下2012-12-12
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例代碼。2009-11-11
JavaScript實(shí)現(xiàn)枚舉的幾種方法總結(jié)
在前端開發(fā)中,我們可能經(jīng)常需要用到枚舉,使用枚舉的好處是為了讓代碼的可讀性更強(qiáng),避免直接使用數(shù)字或未知的字符串,但是在JavaScript中,要自己實(shí)現(xiàn)一個(gè)枚舉功能,那么大家能想到多少種實(shí)現(xiàn)枚舉的方法呢,我將介紹幾種實(shí)現(xiàn)枚舉的好方法2023-08-08

