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 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
javascript实现放大镜功能
Dec 09 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
SVG描边动画
2017/02/23 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
银行出纳岗位职责
2013/11/25 职场文书
档案接收函
2014/01/13 职场文书
小学综合实践活动总结
2014/07/07 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
民事诉讼代理词
2015/05/25 职场文书
2016党员入党决心书
2015/09/22 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers