利用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调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
js性能优化技巧
Nov 29 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP实现八皇后算法
2019/05/06 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
flask实现验证码并验证功能
2019/12/05 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
售前工程师职业生涯规划
2014/03/02 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技