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 Date日期和时间对象
Dec 29 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
vue+django实现下载文件的示例
Mar 24 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
Python中你应该知道的一些内置函数
2017/03/31 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
python3访问字典里的值实例方法
2020/11/18 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
团员的自我评价
2013/12/01 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015年大学生工作总结
2015/04/21 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS