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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
JS实现简易计算器
Feb 14 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
vue中watch的用法汇总
Dec 28 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/10/09 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python实现抖音视频批量下载
2018/06/20 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Django中的forms组件实例详解
2018/11/08 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
减负增效提质方案
2014/05/23 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
大学计划书范文800字
2014/08/14 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
教师调动申请报告
2015/05/18 职场文书
政协工作总结2015
2015/05/20 职场文书
什么是SOLID
2022/03/24 Javascript
python套接字socket通信
2022/04/01 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js