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下的keyCode键码值表
Apr 10 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
js实现常见的工具条效果
Mar 02 Javascript
js实现登录与注册界面
Nov 01 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
JS数据类型分类及常用判断方法
Nov 19 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python实现大文件排序的方法
2015/07/10 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
最小二乘法及其python实现详解
2020/02/24 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python开发入门——set的使用
2020/09/03 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
教师求职推荐信范文
2013/11/20 职场文书
学生励志演讲稿
2014/01/06 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
七一党日活动总结
2014/07/08 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫