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代码
Jan 01 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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实现检查文章是否被百度收录
2015/01/27 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
Array对象方法参考
2006/10/03 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
python在地图上画比例的实例详解
2020/11/13 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
什么是数据抽象
2016/11/26 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
党员入党表决心的话
2014/03/11 职场文书
绩效管理实施方案
2014/03/19 职场文书
颁奖晚会主持词
2014/03/25 职场文书
高中生操行评语大全
2014/04/25 职场文书
记者节感言
2015/08/03 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技