利用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面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
全面了解js中的script标签
Jul 04 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
大师制作的中短波矿石收音机
2020/04/02 无线电
用Flash图形化数据(二)
2006/10/09 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
jquery自定义函数的多种方法
2014/01/09 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
简单使用Python自动生成文章
2014/12/25 Python
python友情链接检查方法
2015/07/08 Python
Python装饰器原理与用法分析
2018/04/30 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
2014年单位工作总结范文
2014/11/27 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server