利用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 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
thinkPHP查询方式小结
2016/01/09 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
DOM 事件流详解
2015/01/20 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
Seajs源码详解分析
2019/04/02 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Python的ORM框架SQLObject入门实例
2014/04/28 Python
详解Python发送邮件实例
2016/01/10 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
高三地理教学反思
2014/01/11 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
学生期末评语大全
2014/04/30 职场文书
2015年党总支工作总结
2015/05/25 职场文书
追讨欠款律师函
2015/06/24 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Python自动化实战之接口请求的实现
2022/05/30 Python