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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
Angular的事件和表单详解
Dec 26 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
JS如何实现基于websocket的多端桥接平台
May 14 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语法(1)
2006/10/09 PHP
php牛逼的面试题分享
2013/01/18 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
jquery获取radio值实例
2014/10/16 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue 巧用过渡效果(小结)
2018/09/22 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python函数中不定长参数的写法
2019/02/13 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
美的官方商城:Midea
2016/09/14 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
数学系毕业生求职信
2014/05/29 职场文书
公民授权委托书范本
2014/09/17 职场文书
化验员岗位职责
2015/02/14 职场文书
员工辞退通知书
2015/04/17 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python