利用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 01 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
Js获取事件对象代码
2010/08/05 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
小程序实现单选多选功能
2018/11/04 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
Python导入模块时遇到的错误分析
2017/08/30 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
高效使用Python字典的清单
2018/04/04 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python将list转为matrix的方法
2018/12/12 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
音乐专业自荐信
2014/02/07 职场文书
环保建议书
2014/03/12 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
创业计划书之甜品店
2019/09/18 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android