当前位置: 代码迷 >> Web前端 >> 唯其如此输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
  详细解决方案

唯其如此输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)

热度:646   发布时间:2012-11-23 22:54:33.0
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了,在看jQuery基础教程,里面看到一个小例子,拒绝非数字输入,觉得蛮好玩的,跟着那书上了例子把代码打了出来,可是在测试的时候却是有问题的,本来应该是只能输入数字的,可连英文字母都能输入,自己稍微改了一下。
html源码如下:
<!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 runat="server">
    <title></title>
    <script src="js/jquery.pack.js" type="text/javascript"></script>
    <script src="js/JScript.js" type="text/javascript"></script>
</head>
<body>
    只能输入数字的文本框:<input type="text" id="quantity" name="quantity" />
    <span id="mes" style="color:#00f;"></span>
</body>
</html>

JScript.js源码如下:
$(function() {
    // 给文本框加个keypress,即键盘按下的时候判断
    $("#quantity").keypress(function(event) {
        if (!$.browser.mozilla) {
            $("#mes").text("您按下的键值是: " + event.keyCode);
            if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57)) {
                // ie6,7,8,opera,chrome管用
                event.preventDefault();
            }
        } else {
            $("#mes").text("您按下的键值是: " + event.charCode);
            if (event.charCode && (event.charCode < 48 || event.charCode > 57)) {
                // firefox管用
                event.preventDefault();
            }
        }
    });
});

要注意的就是我们是在文本框的keypress事件上编写代码,即键盘按下的时候我们就要做判断了。。
之所以要加判断是经本人测试,有些浏览器支持keyCode,有些浏览器支持charCode的,总之以上代码兼容IE6,7,8,oprea,firefox,chrome浏览器。
以上代码还有一个缺陷就是可以往文本框里输入中文的,请哪位高手帮忙改一下。。。呵呵。。。多谢了。。。

注:如果是要只能输入最多两位小数的正数的话则代码如下:
/*
 * 创建人:牛腩
 * 说明:只能向文本框里输入数字,缺点是可以输入中文,所以还要在焦点失去的时候做个判断
 */
$(function() {
    // 给文本框加个keypress,即键盘按下的时候判断
$("#ctl00_ContentPlaceHolder1_txtSumValue").keypress(function(event) {
        if (!$.browser.mozilla) {
            if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 46) {
                // ie6,7,8,opera,chrome管用
                event.preventDefault();
            }
        } else {
        if (event.charCode && (event.charCode < 48 || event.charCode > 57) && event.keyCode != 46) {
                // firefox管用
                event.preventDefault();
            }
        }
    });

    // 当文本框失去焦点的时候,检测输入的是否是数字
    $("#ctl00_ContentPlaceHolder1_txtSumValue").blur(function() {
        var input = $(this);
        var v = $.trim(input.val());
        //alert("输入值:" + v);
        var reg = new RegExp("^[0-9]+(.[0-9]{2})?$", "g");
        if (!reg.test(v)) {
            alert("请输入一个数字,最多只能有两位小数!");
            input.val("0");
        }
    });
});
1 楼 wangr15 2009-12-10  
//屏蔽输入法
$(#ctl00_ContentPlaceHolder1_txtSumValue).css("ime-mode", "disabled");
//然后用jquery绑定一个paste事件,屏蔽粘贴。
$(#ctl00_ContentPlaceHolder1_txtSumValue).bind("paste", function() {
  //....
});
  相关解决方案