文本框脚本 - 过滤输入

过滤输入经常应用的场合是，限定文本框的输入特定数据，或者输入特定格式的数据。

当输入那离不开键盘，当然也不开这三个事件：

　　keydown

　　keypress

　　keyup

先来看看这些事件的顺序：

    textbox.addEventListener("keyup",function(){
        console.log("keyup"); //3
    },false);
    textbox.addEventListener("keydown",function(){
        console.log("keydown");//1
    },false);

    textbox.addEventListener("keypress",function(){
        console.log("keypress");//2
    },false);

既然我们要过滤某些内容，那必须知道我们按下的是什么？

这个可以根据事件对象中的一个属性，在 IE9+ Firefox Safari Chorme Opera中 可以通过charCode获取。

　　在IE8以及低版本 以及Opera，不支持该属性，则提供 keyCode，不管哪个属性值，只有 在 keypress 事件时事件对象中才会包含该属性。

下面来看看具体获取 keyCode 或 charCode 的方式

　　

    function addHandler(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+ type,handler);
        }else{
            element["on"+type] = handler;
        }
    }
    function getEvent(event){
        return event?event:window.event;
    }

    function getCharCode(event){
        event = getEvent(event);
        if(event.charCode){
            console.log("Chrome"+ event.charCode);
        }else if(event.keyCode) {
            console.log("IE Opera" + event.keyCode);
        }
    }
    var textbox = document.forms[0].elements[0]; //123
    addHandler(textbox,"keypress",function(event){
        console.log(getCharCode(event));
    });

上面主要是兼容了各种浏览器，主要是对IE、Chrome、Safari、Forfix、Opera

　　key（按键）- 对应的ISC码值  - 通过 String类的fromCharCode 作为转换成对应的字符串形式

 

实例一：  屏蔽字符

　　

    var textbox = document.forms[0].elements[0]; //123
    addHandler(textbox,"keypress",function(event){
        event = getEvent(event);
        var code = getCharCode(event);
        if(!/\d+/.test(String.fromCharCode(code))){
            preventDefault(event);
        }
    });