利用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动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
基于canvasJS在PHP中制作动态图表
May 30 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
Vue实现简易购物车页面
Dec 30 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
Banner程序
2006/10/09 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python实现简单登录验证
2016/04/13 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Django框架表单操作实例分析
2019/11/04 Python
python爬虫之遍历单个域名
2019/11/20 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
国际贸易系求职信
2014/08/09 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
单位病假条范文
2015/08/17 职场文书
Golang jwt身份认证
2022/04/20 Golang