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如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
学习Angularjs分页指令
Jul 01 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
详解Node.js如何处理ES6模块
May 15 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
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
解析Python中的异常处理
2015/04/28 Python
python运行时间的几种方法
2016/06/17 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
毕业自我鉴定范文
2013/11/06 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
《悯农》教学反思
2014/04/28 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
使用nginx配置访问wgcloud的方法
2021/06/26 Servers