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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
ES10 特性的完整指南小结
Mar 04 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php 中文处理函数集合
2008/08/27 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python解析json文件相关知识学习
2016/03/01 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python笔记之facade模式
2019/11/20 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
详解Python IO编程
2020/07/24 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
电子商务应届生自我鉴定
2014/01/13 职场文书
派出所所长先进事迹
2014/05/19 职场文书
初中军训感言
2015/08/01 职场文书
团支部书记竞选稿
2015/11/21 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS