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 动态生成方法的例子
Jul 22 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
微信小程序用户授权最佳实践指南
May 08 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的PDO事务处理机制实例分析
2017/02/16 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JS中表单的使用小结
2014/01/11 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python pip配置国内源的方法
2020/02/14 Python
python数据爬下来保存的位置
2020/02/17 Python
python实现控制台输出颜色
2021/03/02 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
linux面试题参考答案(9)
2016/01/29 面试题
自荐书格式
2013/12/01 职场文书
党员四风剖析材料
2014/08/27 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
学校开学标语
2014/10/06 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB