码迷,mamicode.com
首页 > 其他好文 > 详细

文本框脚本 - 过滤输入

时间:2016-07-31 01:35:26      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

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

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

  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);
        }
    });

 

文本框脚本 - 过滤输入

标签:

原文地址:http://www.cnblogs.com/czhyuwj/p/5721692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!