利用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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
ext form 表单提交数据的方法小结
2008/08/08 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python 调用Java实例详解
2017/06/02 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
2014年党建工作总结
2014/11/11 职场文书
员工福利申请报告
2015/05/15 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers