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


Posted in Javascript onOctober 07, 2016

网站中的一个小功能:要求用户只能输入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>

页面效果:

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

浏览器的兼容性:

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

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

Javascript 相关文章推荐
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
JS只能输入正整数的简单实例
Oct 07 #Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 #Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 #Javascript
JavaScript SHA512加密算法详细代码
Oct 06 #Javascript
JQuery PHP图片在线裁剪实例
Jul 27 #Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 #Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 #Javascript
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
yii操作cookie实例简介
2014/07/09 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
js实现移动端吸顶效果
2020/01/08 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
python3个性签名设计实现代码
2018/06/19 Python
Flask-Mail用法实例分析
2018/07/21 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
金融行业职业生涯规划范文
2014/01/17 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
党课培训主持词
2014/04/01 职场文书
质量月口号
2014/06/20 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
致青春观后感
2015/06/09 职场文书