利用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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
数组Array的排序sort方法
Feb 17 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
phpmyadmin操作流程
2006/10/09 PHP
杏林同学录(五)
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
关于尾递归的使用详解
2013/05/02 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
JS简单计算器实例
2015/01/20 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
详解vue-cli官方脚手架配置
2018/07/20 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Tensorflow累加的实现案例
2020/02/05 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
应届毕业生应聘自荐信范文
2014/02/26 职场文书
学习经验交流会主持词
2014/04/01 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
公务员考察材料范文
2014/12/23 职场文书
就业意向协议书
2015/01/29 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
进行数据处理的6个 Python 代码块分享
2022/04/06 Python