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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Angular2之二级路由详解
Aug 31 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
详解Next.js页面渲染的优化方案
Jan 27 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实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python打包成so文件过程解析
2019/09/28 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
PyTorch-GPU加速实例
2020/06/23 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
专升本自我鉴定
2013/10/10 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
房产继承公证书
2014/04/09 职场文书
小学生评语集锦
2014/04/18 职场文书
社区工作者演讲稿
2014/05/23 职场文书