表单处理[4]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9:42</title>
<script>
//跨浏览器添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}
//跨浏览器移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}
//跨浏览器阻止默认行为
function preDef(evt){
var e=evt||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
//跨浏览器获取目标对象
function getTarget(evt){
if(evt.target){ //W3C
return evt.target;
}else if(window.event.srcElement){ //IE
return window.event.srcElement;
}
}
//跨浏览器获取字符编码
function getCharCode(evt){
var e=evt||window.event;
if(typeof e.charCode=='number'){
return e.charCode;
}else {
return e.keyCode;
}
}
// 过滤输入模式：纯数字
// 1.禁止或屏蔽非数字键的输入，阻止非数字键的默认行为
// 2.验证后取消，你可以先输入非法字符，然后判断后，取消你刚输入的文本
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var user=fm.elements['user'];
var content=fm.elements['content'];
addEvent(content,'keypress',function(evt){
var e=evt||window.event;
var charCode=getCharCode(evt);
//alert(charCode);
//alert(String.fromCharCode(charCode));
//正则表达式来获取文本是否为数字
if(!/\d/.test(String.fromCharCode(charCode)) && charCode>0){
preDef(evt); //屏蔽掉非数字键盘的输入 加上charCode>0是因为火狐光标键，退格键，删除键都是0
// ps:前半段条件判断只有数字才可以输入，导致常规按键，比如光标键、退格键、删除键等无法使用。部分浏览器比如Firfox，需要解放这些键，而非字符触发的编码均为0；在Safari3之前的浏览器，也会被阻止，而它对应的字符编码全部为8，所以最后加上charCode>8即可
//这种方法比较脆弱
}
});
// addEvent(content,'copy',function(evt){
// preDef(evt);
// })
// addEvent(content,'cut',function(evt){
// preDef(evt);
// })
// addEvent(content,'paste',function(evt){
// preDef(evt);
// })
//屏蔽中文输入法,但Chrome无效
//content.style.imeMode='disabled';
// PS: 屏蔽输入法用户体验不是很好，会让用户以为电脑坏了
//用这种方法：
//验证舒服非法后取消输入
addEvent(content,'keyup',function(evt){
this.value=this.value.replace(/[^\d]/g,''); //将非数字键转换为空
})
})
</script>
</head>
<body>
<form id="myForm" name="yourForm">
姓名：<input type="text" name="user" value="123"/>
<textarea name="content">textarea</textarea>
</form>
</body>
</html>
