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使用指南之base.js
Jan 10 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
Bootstrap布局方式详解
May 27 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
js option删除代码集合
2008/11/12 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue父子组件通信的高级用法示例
2019/08/29 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
python发送邮件脚本
2018/05/22 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
眼镜促销方案
2014/03/15 职场文书
党支部活动策划方案
2014/08/18 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年政工师工作总结
2014/12/18 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年高中语文教学总结
2015/08/18 职场文书