利用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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
ES6关于Promise的用法详解
May 07 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python3中数组逆序输出方法
2020/12/01 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
办公室人员先进事迹
2014/01/27 职场文书
就业自我评价
2014/02/04 职场文书
鸿星尔克广告词
2014/03/21 职场文书
个人工作表现自我评价
2015/03/06 职场文书
学校党支部承诺书
2015/04/30 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
运动会通讯稿100字
2015/07/20 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL