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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
vue之nextTick全面解析
May 17 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php实现httpclient类示例
2014/04/08 PHP
php生成圆角图片的方法
2015/04/07 PHP
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python 同时运行多个程序的实例
2019/01/07 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Python ini文件常用操作方法解析
2020/04/26 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Python 高效编程技巧分享
2020/09/10 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
晨会主持词
2014/03/17 职场文书
高中生家长寄语大全
2014/04/03 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
宣传工作经验材料
2014/06/02 职场文书
学位证书委托书
2014/09/30 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
怎样写家长意见
2015/06/04 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
Python函数对象与闭包函数
2022/04/13 Python