JavaScript学习笔记7--只允许向文本框输入特定的字符
2007-08-19 13:14
519 查看
我们给文本框指定一个新的属性validchars,只有在validchars里的字符，才被允许
输入，怎样实现这个功能呢？看下面的例子：
<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>
这里要用到个浏览器检测脚本，若不检测浏览器，仅仅凭借keyCode和charCode,在处理退
格键时会出现问题,因为退格键会返回keyCode，这样会导致在Mozilla环境下退格键无效。
所以不能怕麻烦，只好做一下浏览器检测，下面是Detect.js的代码，是Zakas写的，可以
直接拷贝下来用，能检测目前市面上大部分的浏览器：
var sUserAgent=navigator.userAgent;
var fAppVersion=parseFloat(navigator.appVersion);
//compare version
function compareVersions(sVersion1,sVersion2){
var aVersion1=sVersion1.split(".");
var aVersion2=sVersion2.split(".");
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;
}
//check Opera
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;
}
//check Safari or Konqueror
var isKHTML=sUserAgent.indexOf("KHTML")>-1
||sUserAgent.indexOf("Konqueror")>-1
||sUserAgent.indexOf("AppleWebKit")>-1;
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;
}
//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;
}
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;
}
}
上面的例子里开考虑到另外一个问题，就是也要把粘贴禁用掉，否则仅仅做键盘输入的控制
没有任何意义。在IE里禁用粘贴比较简单，在onpaste事件处理函数里直接返回false,这样
连Ctrl+V都可以一起禁用掉，另外也要把右键菜单禁用掉，让oncontextmenu事件处理函数返
回false就可以了。在Mozilla下稍微麻烦一点，除了要做前面的工作，还要单独来处理Ctrl+V.
我们只要改一下allowChars() 函数的返回值就可以了，改成：
return bIsValidChar && !(oEvent.ctrlKey && sChar=="v");
上面的语句很简单，就是加个判断有没有按Ctrl和V的语句。这个例子在IE,Mozilla和safari
测试通过，不过在opera下好象无效，还不清楚原因。
输入，怎样实现这个功能呢？看下面的例子：
<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>
这里要用到个浏览器检测脚本，若不检测浏览器，仅仅凭借keyCode和charCode,在处理退
格键时会出现问题,因为退格键会返回keyCode，这样会导致在Mozilla环境下退格键无效。
所以不能怕麻烦，只好做一下浏览器检测，下面是Detect.js的代码，是Zakas写的，可以
直接拷贝下来用，能检测目前市面上大部分的浏览器：
var sUserAgent=navigator.userAgent;
var fAppVersion=parseFloat(navigator.appVersion);
//compare version
function compareVersions(sVersion1,sVersion2){
var aVersion1=sVersion1.split(".");
var aVersion2=sVersion2.split(".");
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;
}
//check Opera
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;
}
//check Safari or Konqueror
var isKHTML=sUserAgent.indexOf("KHTML")>-1
||sUserAgent.indexOf("Konqueror")>-1
||sUserAgent.indexOf("AppleWebKit")>-1;
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;
}
//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;
}
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;
}
}
上面的例子里开考虑到另外一个问题，就是也要把粘贴禁用掉，否则仅仅做键盘输入的控制
没有任何意义。在IE里禁用粘贴比较简单，在onpaste事件处理函数里直接返回false,这样
连Ctrl+V都可以一起禁用掉，另外也要把右键菜单禁用掉，让oncontextmenu事件处理函数返
回false就可以了。在Mozilla下稍微麻烦一点，除了要做前面的工作，还要单独来处理Ctrl+V.
我们只要改一下allowChars() 函数的返回值就可以了，改成：
return bIsValidChar && !(oEvent.ctrlKey && sChar=="v");
上面的语句很简单，就是加个判断有没有按Ctrl和V的语句。这个例子在IE,Mozilla和safari
测试通过，不过在opera下好象无效，还不清楚原因。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript学习笔记7--只允许向文本框输入特定的字符
- JavaScript学习笔记7--只允许向文本框输入特定的字符
- JavaScript学习笔记6--阻止向文本框输入指定的字符
- JavaScript学习笔记6--阻止向文本框输入指定的字符
- JavaScript学习笔记6--阻止向文本框输入指定的字符
- 简单JavaScript代码让文本框不能输入特定字符
- UE4 学习笔记（一）--- TextBox 文本框用BluePrint做限制字符输入个数
- 使用Javascript限制文本框只允许输入数字
- 文本框只允许输入数字.net/javascript
- 使用Javascript限制文本框只允许输入数字
- HTML 限制文本框只能输入特定字符（比如数字 onkeyup+onafterpaste）
- 【学习笔记】关于输入缓冲区。一个不规范的字符赋值语句引发的讨论
- JavaScript学习笔记5--限制textarea的字符数
- 编辑框中只允许输入某些特定字符的解决方法
- web开发-java实现读文件修改特定字符之后写入文件-学习笔记七
- JavaScript学习笔记5--限制textarea的字符数
- 7.29学习笔记字符输入输出流
- Windows Phone 7 学习笔记三------文本框输入作用域
- Windows Phone 7 学习笔记三------文本框输入作用域
- 使用Javascript限制文本框只允许输入数字