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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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 array_flip() 删除数组重复元素
2009/01/14 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
使用Python生成url短链接的方法
2015/05/04 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
餐厅考勤管理制度
2014/01/28 职场文书
水利水电专业自荐信
2014/07/08 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
趣味运动会开幕词
2015/01/28 职场文书
毕业生学校组织意见
2015/06/04 职场文书
企业愿景口号
2015/12/25 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
python中if和elif的区别介绍
2021/11/07 Python
Python制作春联的示例代码
2022/01/22 Python