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 学习笔记 选择器之三
Jul 23 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
webpack4简单入门实例
2018/09/06 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python callable()函数用法实例分析
2018/03/17 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
自我鉴定四大框架
2014/01/17 职场文书
学校火灾防控方案
2014/06/09 职场文书
股东授权委托书范文
2014/09/13 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2014年财政局工作总结
2014/12/09 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
幼儿园辞职书
2015/02/26 职场文书
国富论读书笔记
2015/06/26 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫