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 String.replace的妙用
Sep 08 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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/04 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
使用js 设置url参数
2013/07/08 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python tkinter模版代码实例
2020/02/05 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
杭州-DOTNET笔试题集
2013/09/25 面试题
LINUX下线程,GDI类的解释
2012/04/17 面试题
初中地理教学反思
2014/01/11 职场文书
学生会干部自荐信
2014/02/04 职场文书
中专自我鉴定
2014/02/05 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2014年生产部工作总结
2014/12/17 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年学校减负工作总结
2015/05/19 职场文书