利用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引导程序
Oct 26 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
多种方式实现js图片预览
Dec 12 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
vue mvvm数据响应实现
Nov 11 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
php生成图形(Libchart)实例
2013/11/06 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JavaScript File分段上传
2016/03/10 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
自荐信格式
2013/12/01 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
圣诞晚会主持词
2015/07/01 职场文书
民事调解协议书
2016/03/21 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js