脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 文本框赋值

jQuery+正则+文本框只能输入数字的实现方法

 更新时间：2016年10月07日 11:37:14   投稿：jingxian  
下面小编就为大家带来一篇jQuery+正则+文本框只能输入数字的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

网站中的一个小功能：要求用户只能输入16位数字。

试过javascript的方法：

如：一种方法：

//只允许输入数字
     function checkkey2(value, e) {
       var key = window.event ? e.keyCode : e.which;
       if ((key > 95 && key < 106) || (key > 47 && key < 60)) {

       }
       else if (key != 8) {
         if (window.event) //IE
         {
           e.returnValue = false; 
         }
         else //Firefox
         {
           e.preventDefault();
         }
       };
     };

 另一种方法：

用正则表达式限制只能输入数字：
onkeyup="value=value.replace(/[^/d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"

上面的两种方法我均用过，但多少都会出现一些问题，比如浏览器的兼容性问题，不能达到想要的效果等，所以，最后还是考虑用正则来自己写。

直接贴代码了，很简单的正则表达式：

<head>
  <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
  <title></title>
  <!-- http://www.cnblogs.com/babycool -->
  <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#xxxxxx").keyup(function () {
        //如果输入非数字，则替换为''，如果输入数字，则在每4位之后添加一个空格分隔
        this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
      })
    });
  </script>
</head>
<body>
  限制只能输入19个字符
  <input id="xxxxxx" type="text" name="name" value="" maxlength="19" />
  <br />
 
  <br />
  输入非数字替换为''
  <input type="text" name="name" value="" onkeyup="value=value.replace(/[^\d]/g,'')" />
  <br />
  <br />
</body>

页面效果：

浏览器的兼容性：

我在IE7.8.9.10下，firefox，chrome下测试均可以。 

以上就是小编为大家带来的jQuery+正则+文本框只能输入数字的实现方法全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • JQuery中基础过滤选择器用法实例分析

    JQuery中基础过滤选择器用法实例分析

    这篇文章主要介绍了JQuery中基础过滤选择器用法,涉及jQuery属性选择及样式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • jquery获取form表单input元素值的简单实例

    jquery获取form表单input元素值的简单实例

    下面小编就为大家带来一篇jquery获取form表单input元素值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery帮助之CSS尺寸(五)outerHeight、outerWidth

    jQuery帮助之CSS尺寸(五)outerHeight、outerWidth

    在前面我们分别通过innerHeight()和innerWidth()来获得第一个匹配元素内部区域的高度和宽度，我们在应用中往往除了需要内部的尺寸，同样还需要知道外部的高度和宽度.
    2009-11-11
  • Jquery中offset()和position()的区别分析

    Jquery中offset()和position()的区别分析

    这篇文章主要介绍了Jquery中offset()和position()的区别,实例分析了offset()与position()的使用的技巧与区别,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery实现电梯导航模块

    jQuery实现电梯导航模块

    这篇文章主要为大家详细介绍了jQuery实现电梯导航模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • jQuery前端框架easyui使用Dialog时bug处理

    jQuery前端框架easyui使用Dialog时bug处理

    本文介绍了在jQuery前端框架easyui开发UI时，使用Dialog时发现遮罩无法覆盖页面内容，而且对话框也显示不出来，经过一番研究，才发现问题所在，这里分享给大家，有相同情况的小伙伴可以参考下
    2014-12-12
  • 基于JQuery的动态删除Table表格的行和列的代码

    基于JQuery的动态删除Table表格的行和列的代码

    基于JQuery的动态删除Table表格的行和列的代码以前脚本之家也发布过相关的代码，大家可以参考下。
    2011-05-05
  • 利用jQuery实现轮播图效果

    利用jQuery实现轮播图效果

    这篇文章主要为大家详细介绍了利用jQuery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jQuery的实例及必知重要的jQuery选择器详解

    jQuery的实例及必知重要的jQuery选择器详解

    下面小编就为大家带来一篇jQuery的实例及必知重要的jQuery选择器详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • Jquery中获取iframe的代码

    Jquery中获取iframe的代码

    在一下网页中，一些人会用到iframe，dom获取页面中的iframe还是很简单的
    2011-01-01

最新评论