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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
新手简单了解vue
May 29 Javascript
JS实现的字符串数组去重功能小结
Jun 17 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
详解YII关联查询
2016/01/10 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python pygame实现球球大作战
2019/11/25 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Jdbc数据访问技术面试题
2012/03/30 面试题
送餐员岗位职责范本
2014/02/21 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
卫生标语大全
2014/06/21 职场文书
2014年保管员工作总结
2014/11/18 职场文书
中学推普周活动总结
2015/05/07 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书