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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript数组的使用
Mar 28 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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生成静态页面详解
2006/12/05 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
django 修改server端口号的方法
2018/05/14 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
如何基于python生成list的所有的子集
2019/11/11 Python
基于python实现把图片转换成素描
2019/11/13 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
保健品市场营销方案
2014/03/31 职场文书
金融保险专业求职信
2014/09/03 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
PHP判断是否是json字符串
2021/04/01 PHP