利用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或css文件后面跟参数的原因说明
Jan 09 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
javascript实现时钟动画
Dec 03 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对象、模式与实践之高级特性分析
2016/12/08 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP实现简单登录界面
2019/10/23 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python实现宿舍管理系统
2019/11/22 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
个人自荐信
2013/12/05 职场文书
司机辞职报告范文
2014/01/20 职场文书
大学校务公开实施方案
2014/03/31 职场文书
教师演讲稿开场白
2014/08/25 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
教师岗位职责范本
2015/04/02 职场文书
法律进社区活动总结
2015/05/07 职场文书
交通事故被告答辩状
2015/05/22 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技