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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
js下载文件并修改文件名
May 08 Javascript
理解javascript async的用法
Aug 22 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue中对象数组去重的实现
Feb 06 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中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
python关于倒排列的知识点总结
2020/10/13 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
小摄影师教学反思
2014/04/27 职场文书
干部鉴定材料
2014/05/18 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
高中运动会广播稿
2015/08/19 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Python面向对象之内置函数相关知识总结
2021/06/24 Python
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android