jQuery使用正则表达式限制文本框只能输入数字


Posted in Javascript onJune 18, 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下测试均可以。

以上就是本文的全部内容,希望这个方法也能给遇到相同问题的其他人带来帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
javascript类型转换使用方法
Feb 08 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
jQuery解决$符号命名冲突
Jun 18 #Javascript
prototype.js常用函数详解
Jun 18 #Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 #Javascript
Javascript中prototype的使用详解
Jun 18 #Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
You might like
去除php注释和去除空格函数分享
2014/03/13 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
详解php命令注入攻击
2019/04/06 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python检查ping终端的方法
2019/01/26 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
django API 中接口的互相调用实例
2020/04/01 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
2014年学校食堂工作总结
2014/11/25 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
浅谈Python魔法方法
2021/06/28 Java/Android