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

来源：互联网发布：ubuntu 重置网络编辑：程序博客网时间：2024/05/18 21:49

我们给文本框指定一个新的属性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写的，可以
直接拷贝下来用，能检测目前市面上大部分的浏览器：

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