利用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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
JS定时器实例详细分析
Oct 11 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php实现数据库的增删改查
2017/02/26 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JavaScript面象对象设计
2008/04/28 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python函数与方法的区别总结
2019/06/23 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
行政专员岗位职责
2014/01/02 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
五四青年节活动总结
2015/02/10 职场文书
刑事法律意见书
2015/06/04 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
JS 基本概念详细介绍
2021/10/16 Javascript
Python matplotlib多个子图绘制整合
2022/04/13 Python