只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)

最新推荐文章于 2023-01-02 21:27:42 发布

learning_1

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量133

点赞数

分类专栏： jQuery 文章标签： Chrome Opera jQuery Firefox 浏览器 ViewUI

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

星期天上班真不知道干什么事哦，只好随便看看之前下载的电子书了，在看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");
        }
    });
});

learning_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)

星期天上班真不知道干什么事哦，只好随便看看之前下载的电子书了，在看jQuery基础教程，里面看到一个小例子，拒绝非数字输入，觉得蛮好玩的，跟着那书上了例子把代码打了出来，可是在测试的时候却是有问题的，本来应该是只能输入数字的，可连英文字母都能输入，自己稍微改了一下。html源码如下：[code="html"] 只能输入数...
复制链接

扫一扫

专栏目录