过滤输入经常应用的场合是,限定文本框的输入特定数据,或者输入特定格式的数据。
当输入那离不开键盘,当然也不开这三个事件:
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); } });