JavaScript学习笔记7--只允许向文本框输入特定的字符

我们给文本框指定一个新的属性validchars,只有在validchars里的字符，才被允许
输入，怎样实现这个功能呢？看下面的例子：

< html >
< head >
< title > 允许向文本框输入特定的字符(RunOnMostOfBrowser) </ title >
< script type ="text/javascript" src ="Detect.js" ></ script >
< script type ="text/javascript" >
function allowChars(oTextbox,oEvent){
var sValidChars = oTextbox.getAttribute( " validchars " );
if (isIE){ // IE环境下
var sChar = String.fromCharCode(oEvent.keyCode);
var bIsValidChar = sValidChars.indexOf(sChar) >- 1 ;

}
else { // 其他浏览器下
var sChar = String.fromCharCode(oEvent.charCode);
var bIsValidChar = true ;
if (oEvent.charCode){
bIsValidChar = sValidChars.indexOf(sChar) >- 1 ;
}
}
return bIsValidChar && ! (oEvent.ctrlKey && sChar == " v " );
}
</ script >
</ head >
< body >
< form name ="f1" id ="f1" action ="" method ="post" >
< table border ="0" >
< tr >
< td > Login: </ td >
< td >< input type ="text" name ="login" id ="login" validchars ="0123456789"
onkeypress ="returnallowChars(this,event)" onpaste ="returnfalse"
oncontextmenu ="returnfalse" />
</ td >
</ tr >
< tr >
< td > Password: </ td >
< td >< input type ="text" name ="password" id ="password" validchars ="ABcdefghijklmnopqrstuvwxyz"
onkeypress ="returnallowChars(this,event)" onpaste ="returnfalse"
oncontextmenu ="returnfalse" />
</ td >
</ tr >
< tr >
< td colspan ="2" align ="center" >< input type ="submit" /></ td >
</ tr >
</ table >
</ form >
</ body >
</ html >

这里要用到个浏览器检测脚本，若不检测浏览器，仅仅凭借keyCode和charCode,在处理退
格键时会出现问题,因为退格键会返回keyCode，这样会导致在Mozilla环境下退格键无效。
所以不能怕麻烦，只好做一下浏览器检测，下面是Detect.js的代码，是Zakas写的，可以
直接拷贝下来用，能检测目前市面上大部分的浏览器：

varsUserAgent=navigator.userAgent;
varfAppVersion=parseFloat(navigator.appVersion);
//compareversion
functioncompareVersions(sVersion1,sVersion2){
varaVersion1=sVersion1.split(".");
varaVersion2=sVersion2.split(".");

if(aVersion1.length>aVersion2.length){
for(vari=0;i < aVersion1 .length-aVersion2.length;i++){
aVersion2.push("0");
}
}
elseif(aVersion1.length<aVersion2.length){
for(vari =0;i<aVersion2.length-aVersion1.length;i++){
aVersion1.push("0");
}
}
for(vari =0;i<aVersion1.length;i++){
if(aVersion1[i]<aVersion2[i]){
return-1;
}
elseif(aVersion1[i] > aVersion2[i]){
return1;
}
}
return0;
}

//checkOpera

varisOpera=sUserAgent.indexOf("Opera")>-1;
varisMinOpera4=isMinOpera5=isMinOpera6=isMinOpera7=isMinOpera7_5=false;
if(isOpera){
varfOperaVersion;
if(navigator.appName=="Opera"){
fOperaVersion=fAppVersion;
}
else{
varreOperaVersion=newRegExp("Opera(/d+/./d+)");
reOperaVersion.test(sUserAgent);
fOperaVersion=parseFloat(RegExp["$1"]);
}
isMinOpera4=fOperaVersion>=4;
isMinOpera5=fOperaVersion>=5;
isMinOpera6=fOperaVersion>=6;
isMinOpera7=fOperaVersion>=7;
isMinOpera4=fOperaVersion>=7.5;
}

//checkSafariorKonqueror
varisKHTML=sUserAgent.indexOf("KHTML")>-1
||sUserAgent.indexOf("Konqueror")>-1
||sUserAgent.indexOf("AppleWebKit")>-1;

varisMinSafari1=isMinSafari1_2=false;
varisMinKonq2_2=isMinKonq3=isMinKonq3_1=isMinKonq3_2=false;
if(isKHTML){
isSafari=sUserAgent.indexOf("AppleWebKit")>-1;
isKonq=sUserAgent.indexOf("Konqueror")>-1;
if(isSafari){
varreAppleWebKit=newRegExp("AppletWebKit//(/d+(?:/./d*)?)");
reAppleWebKit.test(sUserAgent);
varfAppleWebKitVersion=parseFloat(RegExp["$1"]);
isMinSafari1=fAppleWebKitVersion>=85;
isMinSafari1_2=fAppleWebKitVersion>=124;
}
elseif(isKonq){
varreKonq=newRegExp("Konqueror//(/d+(?:/./d+(?:/./d)?)?)");
reKonq.test(sUserAgent);
isMinKonq2_2=compareVersions(RegExp["$1"],"2.2")>=0;
isMinKonq3=compareVersions(RegExp["$1"],"3.0")>=0;
isMinKonq3_1=compareVersions(RegExp["$1"],"3.1")>=0;
isMinKonq3_2=compareVersions(RegExp["$1"],"3.2")>=0;
}
}

//checkIE
varisIE=sUserAgent.indexOf("compatible")>-1
&&sUserAgent.indexOf("MSIE")>-1
&&!isOpera;

varisMinIE4=isMinIE5=isMinIE5_5=isMinIE6=false;
if(isIE){
varreIE=newRegExp("MSIE(/d+/./d+);");
reIE.test(sUserAgent);
varfIEVersion=parseFloat(RegExp["$1"]);
isMinIE4=fIEVersion>=4;
isMinIE5=fIEVersion>=5;
isMinIE5_5=fIEVersion>=5.5;
isMinIE6=fIEVersion>=6.0;
}

//checkMozilla
varisMoz=sUserAgent.indexOf("Gecko")>-1&&!isKHTML;
varisMinMoz1=isMinMoz1_4=isMinMoz1_5=false;
if(isMoz){
varreMoz=newRegExp("rv:(/d+/./d+(?:/./d+)?)");
reMoz.test(sUserAgent);
isMinMoz1=compareVersions(RegExp["$1"],"1.0")>=0;
isMinMoz1_4=compareVersions(RegExp["$1"],"1.4")>=0;
isMinMoz1_5=compareVersions(RegExp["$1"],"1.5")>=0;

}

//checknetscape
varisNS4=!isIE&&!isOpera&&!isMoz&&!isKHTML
&&(sUserAgent.indexOf("Mozilla")==0)
&&(navigator.appName=="Netscape")
&&(fAppVersion>=4.0&&fAppVersion < 5 .0);
varisMinNS4 =isMinNS4_5=isMinNS4_7=isMinNS4_8=false;
if(isNS4){
isMinNS4 =true;
isMinNS4_5 =fAppVersion > =4.5;
isMinNS4_7=fAppVersion>=4.7;
isMinNS4_8=fAppVersion>=4.8;
}

//checkOS
varisWin=(navigator.platform=="Win32")||(navigator.platform=="Windows");
varisMac=(navigator.platform=="Mac68K")||(navigator.platform=="MacPPC")
||(navigator.platform=="Macintosh");

varisUnix=(navigator.platform=="X11")&&!isWin&&!isMac;
varisWin95=isWin98=isWinNT4=isWin2K=isWinME=isWinXP=false;
varisMac68K=isMacPPC=false;
varisSunOS=isMinSunOS4=isMinSunOS%=isMinSunOS5_5=false;
if(isWin){
isWin95=sUserAgent.indexOf("Win95")>-1||sUserAgent.indexOf("Windows95")>-1;
isWin98=sUserAgent.indexOf("Win98")>-1||sUserAgent.indexOf("Windows98")>-1;
isWinME=sUserAgent.indexOf("Win9x4.90")>-1||sUserAgent.indexOf("WindowsME")>-1;
isWin2K=sUserAgent.indexOf("WindowsNT5.0")>-1||sUserAgent.indexOf("Windows2000")>-1;
isWinXP=sUserAgent.indexOf("WindowsNT5.1")>-1||sUserAgent.indexOf("WindowsXP")>-1;
isWinNT4=sUserAgent.indexOf("WinNT")>-1||sUserAgent.indexOf("WindowsNT")>-1
||sUserAgent.indexOf("WinNT4.0")>-1||sUserAgent.indexOf("WindowsNT4.0")>-1
&&(!isWinME&&!isWin2K&&!isWinXP);
}
if(isMac){
isMac68K=sUserAgent.indexOf("Mac_68000")>-1||sUserAgent.indexOf("68K")>-1;
isMacPPC=sUserAgent.indexOf("Mac_PowerPC")>-1||sUserAgent.indexOf("PPC")>-1;
}

if(isUnix){
isSunOS=sUserAgent.indexOf("SunOS")>-1;
if(isSunOS){
varreSunOS=newRegExp("SunOS(/d+/./d+(?:/./d+)?)");
reSunOS.test(sUserAgent);
isMinSunOS4=compareVersions(RegExp["$1"],"4.0")>=0;
isMinSunOS5=compareVersions(RegExp["$1"],"5.0")>=0;
isMinSunOS5_5=compareVersions(RegExp["$1"],"5.5")>=0;
}
}

上面的例子里开考虑到另外一个问题，就是也要把粘贴禁用掉，否则仅仅做键盘输入的控制
没有任何意义。在IE里禁用粘贴比较简单，在onpaste事件处理函数里直接返回false,这样
连Ctrl+V都可以一起禁用掉，另外也要把右键菜单禁用掉，让oncontextmenu事件处理函数返
回false就可以了。在Mozilla下稍微麻烦一点，除了要做前面的工作，还要单独来处理Ctrl+V.
我们只要改一下allowChars() 函数的返回值就可以了，改成：
return bIsValidChar && !(oEvent.ctrlKey && sChar=="v");
上面的语句很简单，就是加个判断有没有按Ctrl和V的语句。这个例子在IE,Mozilla和safari
测试通过，不过在opera下好象无效，还不清楚原因。