利用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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
实用函数10
2007/11/08 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
从零学Python之入门(四)运算
2014/05/27 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
flask框架视图函数用法示例
2018/07/19 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
六一儿童节活动策划方案
2014/01/27 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
小学生演讲稿大全
2014/04/25 职场文书
生产车间标语
2014/06/11 职场文书
求职简历自荐信
2014/06/18 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
依法行政工作汇报
2014/10/28 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
高中化学教学反思
2016/02/22 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python