DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 輸入框過濾非數字的js代碼
輸入框過濾非數字的js代碼
編輯:關於JavaScript     

HTML:
復制代碼 代碼如下:
<input type="text" id="only"/>

JS:

window.onload=function(e){
var text=document.getElementById("only"),pattern=/\d/,//pattern匹配字母上的數字鍵
pattern2=/(9[6-9])|(10[0-5])|3(7|9)/,//pattern2匹配小鍵盤上的數字鍵和左右方向鍵
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;//不同事件的事件對象不一樣,這個event和最前面的event不相等
if(!pattern.test(String.fromCharCode(event.keyCode))&&event.keyCode!=8//keyCode=8是退格鍵,因為可以對輸入的數字進行修改,所以退格和左右方向鍵不禁止
&&!pattern2.test(event.keyCode.toString())||event.shiftKey||
event.ctrlKey||event.metaKey){
EventHandle.preventDefault(event);//如果不用對象的這個方法,寫成下面這樣,也可以執行,不過每次按下鍵盤的時候都會進行一次判斷
                               //這個是沒有必要的,所以在頁面加載的時候對事件處理對象定義一個方法,加載後對象的方法就已經是確定的了,以後時候就可以了

                                //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裡面,F12打開開發者工具裡面可以選擇IE版本進行調試

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved