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

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

作者:黄威

主页:黄威的技术博客

时间: 2024-10-21 23:49:29

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

javascript学习_只能输入数字的文本框

最近在看javascript高级程序设计这本书,通过写一些demo帮助加深理解记忆. 此输入数字的文本框在用输入法输入字符的时候还有bug 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 va

java 24 - 6 GUI之 创建只能输入数字的文本框

需求: 创建一个含有标签和文本框的窗体,其中文本框只能输入数字 步骤:(大致上) 创建窗体对象 创建标签对象 创建文本框对象 把组件添加到窗体中 设置标签的监听事件,对键盘按下的数据进行监听 设置窗体关闭监听事件 设置显示窗体 代码: 1 public class FrameTest3 { 2 3 public static void main(String[] args) { 4 5 // 创建窗体对象 6 Frame f = new Frame("QQ号码"); 7 f.setBo

只能输入数字的文本框-php

导读:<inputtype="text"name="textfield"onKeyPress="javascript:alert(event keyCode);returnflase">1 文本框只能输入数字代码(小数点也不能输 <input type="text" name="textfield" onKeyPress="javascript:alert(event.keyCo

js文本框只能输入数字,

1,文本框只能输入数字代码(小数点也不能输入) 复制代码代码示例: <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 2,只能输入数字,能输小数点. 复制代码代码示例: <input onkeyup="if(isNaN(value))execCommand('und

文本框只能输入数字(兼容IE火狐)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

silverlight 文本框只能输入数字

void mobile_KeyUp(object sender, KeyEventArgs e) { Regex rg = new Regex("^[0-9]{1,11}$"); Regex rg1 = new Regex("\b"); if (!rg.IsMatch(mobile.Text) && !rg1.IsMatch(e.Key.ToString())) { if (mobile.Text.Length > 0) { mobile.Te

用Jquery控制文本框只能输入数字和字母

只为成功找方法,不为失败找借口! 用Jquery控制文本框只能输入数字和字母 在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,

C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位

使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat="server" size="5" maxlength="5" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"></asp:TextBox> C# 使用j

javascript设置文本框只能输入数字

javascript设置文本框只能输入数字:在很多实际需要中,需要对输入的内容进行限制,比如有些地方只能够输入数字,例如大家经常使用的QQ号码,这个当然当然是数字了,下面就简单介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.s