利用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之数组(Array)详解
Apr 01 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
常用的javascript设计模式
Jan 11 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 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&amp;java(一)
2006/10/09 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP加密解密类实例代码
2016/07/20 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
大学生护理专业自荐信
2013/10/03 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
初中作文评语大全
2014/04/23 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
如何在C++中调用Python
2021/05/21 Python