当前位置：首页 > JavaScript学习笔记7–只允许向文本框输入特定的字符

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

点击次数:1377  更新日期:2011-01-05
\n

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


\n

<html>
<head>
<title>允许向文本框输入特定的字符(Run On Most Of Browser)</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=”return allowChars(this,event)” onpaste=”return false”
oncontextmenu=”return false” />
</td>
</tr>
<tr>
<td>Password:</td>
<td><input type=”text” name=”password” id=”password” validchars=”ABcdefghijklmnopqrstuvwxyz”
onkeypress=”return allowChars(this,event)” onpaste=”return false”
oncontextmenu=”return false” />
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”submit” /></td>
</tr>
</table>
</form>
</body>
</html>


\n


\n


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

\n

var sUserAgent=navigator.userAgent;
var fAppVersion=parseFloat(navigator.appVersion);
//compare version
function compareVersions(sVersion1,sVersion2){
var aVersion1=sVersion1.split(“.”);
var aVersion2=sVersion2.split(“.”);


\n

if(aVersion1.length>aVersion2.length){
for(var i=0;i<aVersion1.length-aVersion2.length;i++){
aVersion2.push(“0″);
}
}
else if(aVersion1.length<aVersion2.length){
for(var i=0;i<aVersion2.length-aVersion1.length;i++){
aVersion1.push(“0″);
}
}
for(var i=0;i<aVersion1.length;i++){
if(aVersion1[i]<aVersion2[i]){
return -1;
}
else if(aVersion1[i]>aVersion2[i]){
return 1;
}
}
return 0;
}


\n

//check Opera


\n

var isOpera=sUserAgent.indexOf(“Opera”)>-1;
var isMinOpera4=isMinOpera5=isMinOpera6=isMinOpera7=isMinOpera7_5=false;
if(isOpera){
var fOperaVersion;
if(navigator.appName==”Opera”){
fOperaVersion=fAppVersion;
}
else{
var reOperaVersion=new RegExp(“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;
}


\n

//check Safari or Konqueror
var isKHTML=sUserAgent.indexOf(“KHTML”)>-1
||sUserAgent.indexOf(“Konqueror”)>-1
||sUserAgent.indexOf(“AppleWebKit”)>-1;


\n

var isMinSafari1=isMinSafari1_2=false;
var isMinKonq2_2=isMinKonq3= isMinKonq3_1=isMinKonq3_2=false;
if(isKHTML){
isSafari=sUserAgent.indexOf(“AppleWebKit”)>-1;
isKonq=sUserAgent.indexOf(“Konqueror”)>-1;
if(isSafari){
var reAppleWebKit=new RegExp(“AppletWebKit\\/(\\d+(?:\\.\\d*)?)”);
reAppleWebKit.test(sUserAgent);
var fAppleWebKitVersion=parseFloat(RegExp["1"]);
isMinSafari1=fAppleWebKitVersion>=85;
isMinSafari1_2=fAppleWebKitVersion>=124;
}
else if(isKonq){
var reKonq=new RegExp(“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;
}
}

//check IE
var isIE=sUserAgent.indexOf(“compatible”)>-1
&& sUserAgent.indexOf(“MSIE”)>-1
&& !isOpera;

var isMinIE4=isMinIE5=isMinIE5_5=isMinIE6=false;
if(isIE){
var reIE=new RegExp(“MSIE (\\d+\\.\\d+);”);
reIE.test(sUserAgent);
var fIEVersion=parseFloat(RegExp["1"]);
isMinIE4=fIEVersion>=4;
isMinIE5=fIEVersion>=5;
isMinIE5_5=fIEVersion>=5.5;
isMinIE6=fIEVersion>=6.0;
}

//check Mozilla
var isMoz=sUserAgent.indexOf(“Gecko”)>-1 && !isKHTML;
var isMinMoz1=isMinMoz1_4=isMinMoz1_5=false;
if(isMoz){
var reMoz=new RegExp(“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;

}

//check netscape
var isNS4=!isIE && !isOpera && !isMoz && !isKHTML
&& (sUserAgent.indexOf(“Mozilla”)==0)
&& (navigator.appName==”Netscape”)
&& (fAppVersion>=4.0 && fAppVersion<5.0);
var isMinNS4=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;
}


\n

//check OS
var isWin=(navigator.platform==”Win32″) || (navigator.platform==”Windows”);
var isMac=(navigator.platform==”Mac68K”) || (navigator.platform==”MacPPC”)
|| (navigator.platform==”Macintosh”);

var isUnix=(navigator.platform==”X11″) && !isWin && !isMac;
var isWin95=isWin98=isWinNT4=isWin2K=isWinME=isWinXP=false;
var isMac68K=isMacPPC=false;
var isSunOS=isMinSunOS4=isMinSunOS%=isMinSunOS5_5=false;
if(isWin){
isWin95=sUserAgent.indexOf(“Win95″)>-1 || sUserAgent.indexOf(“Windows 95″)>-1;
isWin98=sUserAgent.indexOf(“Win98″)>-1 || sUserAgent.indexOf(“Windows 98″)>-1;
isWinME=sUserAgent.indexOf(“Win 9x 4.90″)>-1 || sUserAgent.indexOf(“Windows ME”)>-1;
isWin2K=sUserAgent.indexOf(“Windows NT 5.0″)>-1 || sUserAgent.indexOf(“Windows 2000″)>-1;
isWinXP=sUserAgent.indexOf(“Windows NT 5.1″)>-1 || sUserAgent.indexOf(“Windows XP”)>-1;
isWinNT4=sUserAgent.indexOf(“WinNT”)>-1 || sUserAgent.indexOf(“Windows NT”)>-1
|| sUserAgent.indexOf(“WinNT4.0″)>-1 || sUserAgent.indexOf(“Windows NT 4.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;
}


\n

if(isUnix){
isSunOS=sUserAgent.indexOf(“SunOS”)>-1;
if(isSunOS){
var reSunOS=new RegExp(“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;
}
}


\n




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

\n