jQuery+正则+文本框只能输入数字的实现方法


Posted in Javascript onOctober 07, 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下测试均可以。 

以上就是小编为大家带来的jQuery+正则+文本框只能输入数字的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
JS只能输入正整数的简单实例
Oct 07 #Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 #Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 #Javascript
JavaScript SHA512加密算法详细代码
Oct 06 #Javascript
JQuery PHP图片在线裁剪实例
Jul 27 #Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 #Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
详解Python3定时器任务代码
2019/09/23 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Pycharm Git 设置方法
2020/09/15 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
加拿大探亲邀请信
2014/01/28 职场文书
读书活动总结
2014/04/28 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers