JavaScript使用键盘输入控制实现数字验证功能


Posted in Javascript onAugust 19, 2016

现在有一个需求如下图:

JavaScript使用键盘输入控制实现数字验证功能

产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单,代码如下:

var isNumber=function(keyCode){
        // 数字
        if (keyCode >= 48 && keyCode <= 57) {
          return true;  
        }
          // 小数字键盘
        if (keyCode >= 96 && keyCode <= 105) {
          return true;
        }
          //tab Backspace, del, 左右方向键
        if (keyCode == 9||keyCode == 8|| keyCode == 32 || keyCode == 46 || keyCode == 37 || keyCode == 39) {
          return true;
        }
        return false
      }

所谓键盘输入控制就是根据键盘输入的keycode来判断输入的是什么类型,即获取按下的键盘按键Unicode值,键盘上每个按键对应的keycode是固定的,网上有很多对照表,我这里就不贴上去了,每一次按键监测到对应的keycode然后对照是否合法,需要注意的是这里合法的不仅是数字,还有上下左右tab和空格方向键,不能禁用用户的操作指令,怎么样,看起来很简单吧。

Javascript 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jquery indexOf使用方法
Aug 19 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
jQuery Validate插件实现表单验证
Aug 19 #Javascript
jQuery如何封装输入框插件
Aug 19 #Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 #Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 #Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 #Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 #Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 #Javascript
You might like
PHP 批量更新网页内容实现代码
2010/01/05 PHP
初识Laravel
2014/10/30 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP中Array相关函数简介
2016/07/03 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
js遍历td tr等html元素
2012/12/13 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Python 类的继承实例详解
2017/03/25 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python中setuptools的作用是什么
2020/06/19 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
仓库文员岗位职责
2014/04/06 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL