利用Keydown事件阻止用户输入实现代码
更新时间：2014年03月11日 16:38:29 作者：
这篇文章主要介绍了利用Keydown事件阻止用户输入的具体实现,需要的朋友可以参考下
先了解下各事件的区别
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
}
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将16进制的字符串转换为10进制整数hex
这篇文章主要介绍了javascript将16进制的字符串转换为10进制整数hex,需要的朋友可以参考下2020-03-03
这篇文章主要给大家介绍了如何用JS实现简单的屏幕录像机,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
下面小编就为大家带来一篇JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了微信小程序实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Javascript在IE或Firefox下获取鼠标位置的代码
由于Firefox和IE等浏览器之间对JS解释的方式不一样，Firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码，思路都一样，就是风格不同。2009-12-12
这篇文章主要介绍了webpack自动化打包的相关知识，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-02-02
这篇文章主要介绍了Bootstrap-table表格初始化表格数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器，感兴趣的朋友跟随小编一起看看吧2019-05-05
这篇文章主要为大家详细介绍了如何利用JavaScript制作一个简单的网页版加减计算器，文中的示例代码讲解详细，感兴趣的可以了解一下2022-05-05
这篇文章主要为大家详细介绍了JS实现简易贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论