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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
在webstorm中配置less的方法详解
Sep 25 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生成便于打印的网页
2006/10/09 PHP
php适配器模式介绍
2012/08/14 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
微信小程序自定义组件
2017/08/16 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python Pygame的具体使用讲解
2017/11/03 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
会计员岗位职责
2014/03/15 职场文书
大型活动组织方案
2014/05/10 职场文书
廉洁校园实施方案
2014/05/25 职场文书
课题研究阶段性总结
2015/08/13 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js