验证框中的输入法切换的实现 兼容Firefox IE Safari

1、只允许输入数字
    <input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')">

    2、只允许输入英文字母、数字和下划线(以下二种方法实现)
    <input name="username" type="text" style="ime-mode:disabled">
    <input name="username" type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

    3、只允许输入英文字母、数字和=@#
    <input name="username" type="text" onkeyup="value=value.replace(/[^\w=@#]|_/ig,'')">

    4、只允许输入汉字
    <input name="username" type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

 

 

众所周知，现在许多网站都使用了验证码 (Captcha) 防止spam。（例如你在本文下方的留言）
前几天在 UCDChina 的群上看见有人提出验证码对于中文用户的可用性问题。即如果当前用户处于中文输入法状态的时候，在验证码输入框中需要切换输入法为英文。这十分不方便。
这几天经过实验，我提出了这样的方法来解决：通过 input[ type = password] 密码输入控件来实现输入法的切换功能。使用一个透明的密码输入控件，将其a.p.浮在div上方，捕捉输入事件。通过下方的div显示输入文本内容。（因为密码输入控件显示的总是星号）
代码片段如下：

复制内容到剪贴板

代码:

    <style type="text/css">
    #inputGhost {
        position:absolute;/*使用绝对定位，浮于div上方*/
        filter:alpha(opacity=0);
        -moz-opacity:0;
        opacity: 0;/*全透明地实现*/
        font:normal 14px "Courier New", Courier, monospace;/*使用与div相同的字体样式。用monospace保证文字等宽，尤其是与密码输入控件的星号等宽*/
        border:1px solid #ccc;
        padding:2px;
        margin:0;
        width:65px;
        height:17px;
    }
    #show {
        text-transform:uppercase;/*大多数验证码输入均为大写字母，所以此处显示大写字母*/
        font:normal 14px "Courier New", Courier, monospace;/*使用与密码输入控件相同的字体样式。*/
        border:1px solid #ccc;
        padding:2px;
        margin:0;
        width:65px;
        height:17px;
    }
    </style>
    <input name="" type="password" id="inputGhost" onkeyup="document.getElementById('show').innerHTML = document.getElementById('inputGhost').value" maxlength="5" />
    <div id="show"></div>

代码中简单地使用onkeyup事件来同步div和密码输入框中的内容。
可以看出，有以下问题：

    * 在输入框中选中文字无高亮
    * 在Safari浏览器中没有光标
    * 输入的时候反应比较慢。

接着，我对javascript做了些改进，代码如下（略去css部分）

复制内容到剪贴板

代码:

<input name="" type="password" id="inputGhost" onblur="bonus.stop()" onfocus="bonus.start()" maxlength="5" />
    <div id="show"></div>
    <script type="text/javascript">
    var bonus = {
        interval : 33,//根据人眼每秒刷新24次的原理。我给定了每秒同步30次。
        timer : null,
      
        start:function(){   
            bonus.timer = setInterval(bonus.set, bonus.interval);
            document.getElementById('show').style.borderColor = "#7F9DB9";//使用边框变色提高输入框的受范性
        },
        stop:function(){
            clearInterval(bonus.timer);
            document.getElementById('show').style.borderColor = "#ccc";
        },
        set:function(){
            document.getElementById('show').innerHTML = document.getElementById('inputGhost').value;
        }
    }
    </script>

代码中使用Timer事件来同步div和密码输入框中的内容。

    * 改进了focus时输入框边框变色，提高了受范性，缓解了Safari中无关标的问题。
    * 速度明显提升
    * 代码繁长

后来，我另外查阅了资料，发现IE5的版本以上支持一个私有的css属性 : ime-mode。于是只需一行代码，不需要javascript:

复制内容到剪贴板

代码:

<input name="" type="text" style="ime-mode:disabled; text-transform:uppercase" maxlength="5" />

但最后这种方法毕竟只有IE支持。

希望您留下宝贵的意见