限制数字输入-CSDN博客

    通过键盘的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").οnkeydοwn=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=gbk"/>
    <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好像有问题呀!

转载于:https://www.cnblogs.com/cfanseal/archive/2009/05/22/1486831.html