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 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
keep-alive保持组件状态的方法
Dec 02 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&amp;&amp;mysql)六
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue+php实现的微博留言功能示例
2019/03/16 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Python open读写文件实现脚本
2008/09/06 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python语言元素知识点详解
2019/05/15 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
餐饮投资计划书
2014/04/25 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
小学语文教学反思范文
2016/03/03 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Java 多线程并发FutureTask
2022/06/28 Java/Android
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers