利用Keydown事件阻止用户输入实现代码


Posted in Javascript onMarch 11, 2014

先了解下各事件的区别

KeyDown:在控件有焦点的情况下按下键时发生
KeyPress:在控件有焦点的情况下按下键时发生
KeyUp: 在控件有焦点的情况下释放键时发生

1、KeyPress主要用来接收字母、数字等ANSI字符。KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键

2、KeyPress 只能捕获单个字符,KeyDown 和KeyUp 可以捕获组合键。

3、KeyPress 不显示键盘的物理状态(SHIFT键),而只是传递一个字符。KeyPress 将每个字符的大、小写形式作为不同的键代码解释,即作为两种不同的字符。KeyDown 和KeyUp 不能判断键值字母的大小。KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式:keycode — 显示物理的键(将 A 和 a 作为同一个键返回)和 shift —指示 shift + key 键的状态而且返回 A 或 a 其中之一。

5、KeyPress 不区分小键盘和主键盘的数字字符,KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。

6、KeyDown、KeyUp事件是当按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。由于一般按下键盘的键往往会立即放开(这和鼠标不同),所以这两个事件使用哪个差别不大。而且,up和其他两者还有一个区别:要判断key修改后的状态必须用up。

我们可以利用keydown事件来阻止用户的输入,比如某输入域只能输入数字

键盘上数字键的keyCode

[48-57] 数字键
[96-105] 数字小键盘
此外允许Backspace键删除

代码如下

var input = document.getElementById('number_ipt') 
input.onkeydown = function(e) { 
var keyCode = e.keyCode 
if ( !isNumber(keyCode) ) return false 
} // 仅能输入数字 
function isNumber(keyCode) { 
// 数字 
if (keyCode >= 48 && keyCode <= 57 ) return true 
// 小数字键盘 
if (keyCode >= 96 && keyCode <= 105) return true 
// Backspace键 
if (keyCode == 8) return true 
return false 
}
Javascript 相关文章推荐
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 #Javascript
Javascript加载速度慢的解决方案
Mar 11 #Javascript
js解析json读取List中的实体对象示例
Mar 11 #Javascript
JS图片无缝、平滑滚动代码
Mar 11 #Javascript
js 针对html DOM元素操作等经验累积
Mar 11 #Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 #Javascript
php析构函数的具体用法小结
Mar 11 #Javascript
You might like
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
普通员工辞职信
2014/01/17 职场文书
法学函授自我鉴定
2014/02/06 职场文书
毕业生面试求职信
2014/06/23 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python