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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
请求时token过期自动刷新token操作
Sep 11 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开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
jqueryUI tab标签页代码分享
2017/10/09 jQuery
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue-router相关基础知识及工作原理
2018/03/16 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python Queue模块详解
2014/11/30 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Django 返回json数据的实现示例
2020/03/05 Python
python实现横向拼接图片
2020/03/23 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
项目开发计划书
2014/01/09 职场文书
医德医风学习心得体会
2016/01/25 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
java版 联机五子棋游戏
2022/05/04 Java/Android