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

简介: <div class="markdown_views"><p>demo地址: <br><a href="http://123.57.250.51/static/js/keyup2.html" title="只能输入数字的文本框">只能输入数字的文本框</a></p><hr><p>核心js代码:</p><pre class="prettyprint"><code cl

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,表示阻止该事件的默认行为

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

相关文章
|
3月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
101 0
|
数据安全/隐私保护
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一(整理)
uniapp自定义密码输入键盘-数字键盘效果demoUI方法一(整理)
|
数据安全/隐私保护
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二(整理)
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二(整理)
C#限制文本框只能输入指定的类型(汉字、数字)
C#限制文本框只能输入指定的类型(汉字、数字)
220 0
|
JSON 前端开发 API
腾讯位置 - 关键词输入提示(结尾附视频)
腾讯位置 - 关键词输入提示(结尾附视频)
137 0
百度脑图中如果想输入换行符本身(\n)怎么输入
百度脑图中如果想输入换行符本身(\n)怎么输入
百度脑图中如果想输入换行符本身(\n)怎么输入
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程
成功解决wps文档中输入英文单词出现对应英文单词下边红色波浪线(英文拼写自动检测)去掉或加上图文教程
|
XML Android开发 数据格式
EditText首选输入数字,可以切换输入中文英文
EditText首选输入数字,可以切换输入中文英文
285 0
在网页里让文本框只能输入数字的一种方法。外加回车换Tab
第一步利用样式表。 第二步利用js脚本。 function myKeyDown(){    var   k=window.event.keyCode;       if ((k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>...
851 0