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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
聊聊vue 中的v-on参数问题
Jan 29 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
GD输出汉字的函数的分析
2006/10/09 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
比较完整的微信开发php代码
2016/08/02 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
2013/04/23 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
JS实现复制功能
2017/03/01 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
Vue 实现登录界面验证码功能
2020/01/03 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Python os库常用操作代码汇总
2020/11/03 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
UNIX特点都有哪些
2016/04/05 面试题
餐厅筹备计划书
2014/04/25 职场文书
行政求职信
2014/07/04 职场文书
解除劳动合同协议书
2014/09/17 职场文书
简易离婚协议书范本
2014/10/24 职场文书
廉政承诺书
2015/01/19 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers