利用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 相关文章推荐
javascript实现颜色渐变的方法
Oct 30 Javascript
js opener的使用详解
Jan 11 Javascript
js跳转页面方法总结
Jan 29 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
基本DOM节点操作
2017/01/17 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
装修活动策划方案
2014/08/27 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
法律意见书范文
2015/06/04 职场文书
入学证明
2015/06/23 职场文书
网络营销实训总结
2015/08/03 职场文书
2016年党建工作简报
2015/11/26 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python