利用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中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
数据库相关问题
2006/10/09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
cache_lite试用
2007/02/14 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
javascript void(0)的妙用
2009/10/21 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
简单了解Python write writelines区别
2020/02/27 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
护理个人求职信范文
2014/01/08 职场文书
个性与发展自我评价
2014/02/11 职场文书
日化店促销方案
2014/03/26 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers