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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
vue中render函数的使用详解
Oct 12 Javascript
vue 项目build错误异常的解决方法
Apr 22 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中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
详解python中的文件与目录操作
2017/07/11 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python中optparser库用法实例详解
2018/01/26 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
人事部专员岗位职责
2014/03/04 职场文书
对学校的意见和建议
2015/06/04 职场文书
小平小道观后感
2015/06/09 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
Mysql Show Profile
2021/04/05 MySQL
深入浅析Django MTV模式
2021/09/04 Python