利用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判断浏览器类型的代码
Nov 05 Javascript
JS编程小常识很有用
Nov 26 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
Bootstrap插件全集
Jul 18 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 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
php session 错误
2009/05/21 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP.vs.JAVA
2016/04/29 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python函数式编程实例详解
2020/01/17 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
料理师求职信
2014/01/30 职场文书
优良学风班申请材料
2014/02/13 职场文书
单位接收函范文
2015/01/30 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
退休教师追悼词
2015/06/23 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
element多个表单校验的实现
2021/05/27 Javascript