通过键盘的onkeydown 事件,获得事件对象(event)的keyCode 可以做一些限制输入的功能,做项目是有几个输入框需要输入的数字为整
数且数字必须小于某一个值,这种方法比较好,也省去了校验。这里我做了一个简单限制数字输入的功能。
其中有个两个事件操作的函数分别为preventDefault()/*停止默认事件*/, 和stopPropagation()/*停止事件冒泡*/,这两个函数比较经典,
是参考jquery的源代码及网上的几篇文章(这几篇文章地址已经记不住了...)改的。在写这两个函数的时候有一个问题困扰了我很久:如何往这两
个函数里面传递事件对象呢?
首先我先说s一下s事件对象的传递,我们在页面上建一个input id 为inp 代码很简单<input id="inp" value="" type="text" />
我们有两种方法可以传递事件(以onkeydown 事件为例): PS: 功能太小,就不动用jQuery了,顺便也学习一下事件
1.<input id="inps" value="" type="text" onkeydown = "preventDefault(event);stopPropagation(event);" /> 我想这种方式大家
都用吧,只是事件操作和DOM元素混杂在一起,当事件操作很多的时候很不方便,
2.就是用DOM 了,也是我困惑的地方,我看到jquery里面都类似这样传递的$("#XDom").click(function(e){e.preventDefault()});怎么会凭空
多了个 e 出来了,而且e 就变成事件对象了,好神奇呀,于是我就这样写document.getElementById("inp").onkeydown=function(e){
alert(e);} 然后分别在ie 和ff中运行,ie 弹出"undefined" 而ff弹出'[object KeyboardEvent]' ,这下明白了,其实这个e只是变量换成其他名字
也可以,ff会捕获当前的事件,而ie 不会,ie 也好办呀,window.event就是ie的全局事件对象(不知道这样说对不对,差不多就这个意思了...)只
要处理一下就好了 var e = e || window.event; 这样就使得e不论在ff还是在ie中都是事件对象了
下面是事件操作的代码:
Code
function stopPropagation(event) {
var e = event || window.event;
if (e.stopPropagation)
e.stopPropagation();
e.cancelBubble = true;
};
function preventDefault(event) {
var e = event || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
};
这个数字输入限制的功能也就简单啦, 只是keyCode 查起来真麻烦,完整代码如下:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8"/>
<title>数字输入限制</title>
<script type="text/javascript">
function stopPropagation(event) {
var e = event || window.event;
if (e.stopPropagation)
e.stopPropagation();
e.cancelBubble = true;
}
function preventDefault(event) {
var e = event || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function judgeevent(num,o,e) {
e = e ? e : window.event;
var code = e.keyCode
if ((code < 96 || code > 105) && (code < 48 || code > 57) && (code != 8) && (code != 39) && (code != 37) && (code != 46)) {
preventDefault(e);
} else {
if(code >= 48 && code <= 57) {
var tempvalue = o.value;
var tempNum=parseInt(code)-48;
var orNum = tempvalue != ""?parseInt(tempvalue):0;
if((orNum * 10 + tempNum) > num) {
preventDefault(e);
}
} else if(code >= 96 && code <= 105){
var tempvalue = o.value;
var tempNum=parseInt(code)-96;
var orNum = tempvalue != ""?parseInt(tempvalue):0;
if((orNum * 10 + tempNum) > num) {
preventDefault(e);
}
}
}
}
</script>
</head>
<body >
输入100以下的整数:
<input type="text" id="inp" value="" />
<script type="text/javascript">
document.getElementById("inp").onkeydown = function(e){
//alert(e);
judgeevent(99,this,e)
}
</script>
</body>
</html>
代码发了两遍才发上来,tinyMCE好像有问题呀!