利用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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
js实现漫天星星效果
Jan 19 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
vue实现表格过滤功能
Sep 27 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
CocosCreator入门教程之网络通信
Apr 16 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 ajax 分页类代码
2008/11/13 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
vue如何截取字符串
2019/05/06 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
全面了解Python环境配置及项目建立
2016/06/30 Python
分享vim python缩进等一些配置
2018/07/02 Python
django的ORM模型的实现原理
2019/03/04 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
宪法宣传周工作方案
2014/05/26 职场文书
八年级作文之友谊
2019/12/02 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js