[超牛]只能输入数字的文本框,兼容IE7IE8等

来源：互联网发布：runescape 知乎编辑：程序博客网时间：2024/05/21 10:32

demo地址:
只能输入数字的文本框

核心js代码:

/*         * 只能输入正整数,不能有小数点         *         */        onlyIntegerKeyUp = function (e) {            if (e === undefined) {                e = window.event;            }            var obj = e.srcElement ? e.srcElement : e.target;            var pattern = /[^\d]/ig;            var val = obj.value;            if (pattern.test(val)) {                var i = getCursortPosition(e);                obj.value = val.replace(pattern, '');                setCaretPosition(e, i);            }        };        /************************************************         * 获取光标位置         *         * @param ctrl         * @returns {Number}         */        getCursortPosition = function (event) {// 获取光标位置函数            if (event === undefined || event === null) {                event = arguments.callee.caller.arguments[0] || window.event;            }            var obj = event.srcElement ? event.srcElement : event.target;            var CaretPos = 0;   // IE Support            if (document.selection) {                obj.focus();                var Sel = document.selection.createRange();                Sel.moveStart('character', -obj.value.length);                CaretPos = Sel.text.length;            } else if (obj.selectionStart || obj.selectionStart == '0') {                // Firefox support                CaretPos = obj.selectionStart;            }            return (CaretPos);        };        /**********************************************         * 设置光标位置         *         * @param ctrl         * @returns {Number}         */        setCaretPosition = function (event, pos) {// 设置光标位置函数            if (event === undefined || event === null) {                event = arguments.callee.caller.arguments[0] || window.event;            }            var obj = event.srcElement ? event.srcElement : event.target;            if (pos > 0) {                pos = pos - 1;//因为把不匹配的字符删除之后,光标会往后移动一个位置            }            if (obj.setSelectionRange) {                obj.focus();                obj.setSelectionRange(pos, pos);            } else if (obj.createTextRange) {                var range = obj.createTextRange();                range.collapse(true);                range.moveEnd('character', pos);                range.moveStart('character', pos);                range.select();            }        };        /***         * [0-9]<br>         *     12:ok;1.2:error         * @param event         * @returns {boolean}         */        onlyIntegerKeyPress = function onlyIntegerKeyPress(event) {            event = event || window.event || arguments.callee.caller.arguments[0];            //console.log(event);            var charCode2;            if ('charCode' in event) {//IE7 and IE8 no charCode                charCode2 = event.charCode;            } else {                //console.log('no charCode');                charCode2 = event.keyCode;            }            //console.log(charCode2);            if (event.keyCode === 8/*back*/ || event.keyCode === 13/*Enter*/ || event.keyCode === 9/*Tab*/ || event.keyCode === 37/*<- */ || event.keyCode === 39/* ->*/) {                return true;            } else if (charCode2 < 48 || charCode2 > 57) {/*0-9*/                event.returnValue = false;                return false;            } else {                return true;            }        };

页面代码:

<body>只能输入数字: <input type="text" style="ime-mode:disabled;" onkeyup="onlyIntegerKeyUp(event)"               onKeyPress="return onlyIntegerKeyPress(event)"/><br></body>

页面截图:
只能输入数字的文本框

注意:(1)在IE7,IE8中,事件对象event没有charCode 属性;
在事件处理方法中,返回false或者设置event.returnValue 的值为false,表示阻止该事件的默认行为

作者:黄威
主页:黄威的技术博客

1 0