`
niunan
  • 浏览: 721122 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

只能输入数字的文本框(兼容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");
        }
    });
});
4
0
分享到:
评论
1 楼 wangr15 2009-12-10  
//屏蔽输入法
$(#ctl00_ContentPlaceHolder1_txtSumValue).css("ime-mode", "disabled");
//然后用jquery绑定一个paste事件,屏蔽粘贴。
$(#ctl00_ContentPlaceHolder1_txtSumValue).bind("paste", function() {
  //....
});

相关推荐

    只能输入数字文本框C#程序

    在C#编程中,"只能输入数字文本框"是一个常见的需求,特别是在开发用户界面时,例如在财务软件、统计应用或者任何需要用户输入数值数据的场景。为了实现这个功能,我们需要编写特定的代码来限制用户在文本框...

    c# 文本框只能输入数字

    本文将详细介绍如何实现一个C#文本框,使其仅能接受数字输入。 ### 一、问题背景 在开发应用程序时,经常会遇到需要用户输入数字的情况,如商品数量、金额等。为了避免用户误输入非数字字符导致后续计算出错或...

    javascript验证只能输入数字(兼容IE和火狐)

    在网页表单中,我们经常需要对用户输入...通过监听事件、操作DOM元素和应用正则表达式,我们可以创建一个兼容不同浏览器的数字输入验证功能。在开发过程中,应始终关注浏览器兼容性和用户体验,以提供更优质的Web服务。

    C#文本框只能输入数字

    本文将详细介绍如何实现C#中的文本框只能输入数字的功能,并探讨其实现原理。 ### 实现原理 要实现文本框只能输入数字的功能,主要依赖于`KeyPress`事件。当用户在文本框中键入字符时,这个事件会被触发。通过判断...

    WINFORM文本框实现只能输入数字和小数点

    WINFORM文本框实现只能输入数字和小数点

    扩展的输入数字文本框 定时触发 TextChanged 只能输入数字

    一个定时隔1秒钟触发TextChanged事件,并且限定只能输入数字的文本框,仅供参考,各位可以更好的封装。

    js正则表达式限制文本框只能输入数字,能输小数点.

    ### 正则表达式在JavaScript中的应用:限制文本框只能输入数字及小数点 在Web开发中,经常需要对用户输入的数据进行合法性验证。为了确保数据格式正确且符合预期,开发者通常会在前端使用JavaScript结合HTML来实现...

    C#文本框TextBox只有输入数字

    下面将详细介绍如何使C#的TextBox控件只能接受数字输入。 首先,我们可以使用`KeyPress`事件来监听用户在文本框中的输入。`KeyPress`事件会在用户按下键盘上的键时触发,这时我们可以检查按下的键是否为数字键。...

    验证文本框只能输入数字和小数点

    - **数字输入限制**:通过`indexOf`和`substring`方法来检测小数点后的位数是否超过了指定长度。 #### 五、扩展与优化 1. **增加输入提示**:可以通过弹出提示框的方式告诉用户哪些输入是非法的。 2. **增强兼容性*...

    验证文本框只能输入数字

    在网页开发中,我们经常需要对用户输入进行验证,确保数据的正确性和安全性。当设计一个文本框(input type="text")时,如果希望用户只能输入数字,无论...请根据具体需求选择合适的方式,确保文本框只接受数字输入。

    文本框只能输入 数字,小数点,减号 字符的正则表达式

    总结来说,限制文本框只能输入数字、小数点和减号的正则表达式是`^[-+]?[0-9]*\.?[0-9]+$`,它结合了字符集、量词和否定前瞻断言,确保了用户输入的合法性。这种技术在开发中广泛应用,能够提高数据质量,防止因用户...

    限制只能输入数字的文本框

    创建一个继承自TextBox的自定义控件类,然后在该类中重写或添加上述事件处理方法,以实现数字输入的限制。这样可以复用代码并保持界面设计的整洁。 以下是一个简化的实现步骤: ```csharp public class ...

    jquery只能输入数字的文本框插件

    这个“jquery只能输入数字的文本框插件”是为了解决一个常见的用户界面需求:限制用户在特定输入框中只能输入数字,防止非数字字符的输入。这种功能对于处理货币、数量或者任何需要精确数值的数据输入场景尤其有用。...

    文本框只能输入数字

    文本框只能输入数字,其他的任何类型都打不上去 这是一个公共类,里面包含使用方法!

    VB.Net文本框只能输入数字数值

    VB.Net实现文本框只能输入数字,包括小数点。 需要先安装.net2.0 不需要资源分,需要源码发电邮给我。 Email:ILeaper@hotmail.com mokton@gmail.com

    js完美解决jsp文本框限制只能输入数字、小数问题

    特别是在涉及到数值输入时,开发者常常需要限制文本框仅能接受数字或者带有一定数量小数位的数字输入。本文将详细解析一种使用JavaScript(简称JS)的方法来实现这一需求,特别适用于JavaServer Pages (JSP) 环境中...

    只能输入数字的文本框控件(附源程序)

    例如,有时候我们希望用户只能在文本框中输入数字,这样可以确保收集到的数据是有效的数值,便于后续的计算或处理。标题所提及的"只能输入数字的文本框控件"就是针对这一需求的解决方案。这个控件允许开发人员自定义...

    vb.net文本框里只能输入数字

    ' 阻止非数字输入,不触发Text更改 e.Handled = True End If End Sub ``` 这段代码会检查用户按下的是数字键还是退格键或删除键,如果是,则允许输入;否则,阻止输入并取消该事件,防止非数字字符出现在文本框中...

    数字文本框控件数字文本框控件

    数字文本框控件数字文本框控件数字文本框控件数字文本框控件数字文本框控件数字文本框控件数字文本框控件数字文本框控件数字文本框控件数字文本框控件

    VBNET使文本框只能输入数字

    更好用的文本框只能输入数字的版本,防止用户的误输入对小键盘上的数字同样适用.挣点积分!谢谢!

Global site tag (gtag.js) - Google Analytics