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 相关文章推荐
javascript 子窗体父窗体相互传值方法
May 31 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
Vue动态组件实例解析
Aug 20 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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 开源AJAX框架14种
2009/08/24 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python3简单实现微信爬虫
2015/04/09 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python自动登录QQ的实现示例
2020/08/28 Python
通过代码实例了解Python sys模块
2020/09/14 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
C语言面试题
2015/10/30 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
王老吉广告词
2014/03/20 职场文书
奠基仪式策划方案
2014/05/15 职场文书
2014最新离职证明范本
2014/09/12 职场文书
家长评语怎么写
2014/12/30 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
导游词之青城山景区
2019/09/27 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技