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技术实现的web小游戏(不含网游)
Jun 12 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
解析Vue.js中的组件
Feb 02 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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框架的性能
2008/01/10 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
使用jquery实现轮播图效果
2021/01/02 jQuery
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现杨辉三角思路
2017/07/14 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
电子信息毕业生自荐信
2013/11/16 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
小学教师听课制度
2014/02/01 职场文书
党员岗位承诺书
2014/03/25 职场文书
论文指导教师评语
2014/04/28 职场文书
低碳环保口号
2014/06/12 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
php字符串倒叙
2021/04/01 PHP