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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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执行速度全攻略(下)
2006/10/09 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
一份python入门应该看的学习资料
2018/04/11 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
清华大学自主招生自荐信
2014/01/29 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
公司老总年会致辞
2015/07/30 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python