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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
js实现楼层导航功能
Feb 23 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 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的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
浅谈Python的文件类型
2016/05/30 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
用Python制作音乐海报
2021/01/26 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
中学教师岗位职责
2013/11/26 职场文书
小学校长汇报材料
2014/08/20 职场文书
高老头读书笔记
2015/06/30 职场文书
小学体育组工作总结
2015/08/13 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python