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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
微信小程序 slot踩坑的解决
Apr 01 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Vue.js用法详解
2017/11/13 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python3字符串学习教程
2015/08/20 Python
基于Python实现文件大小输出
2016/01/11 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
用python批量移动文件
2021/01/14 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
普通员工辞职信
2014/01/17 职场文书
护理专业自我评价
2015/03/11 职场文书
职工培训工作总结
2015/08/10 职场文书