利用Keydown事件阻止用户输入实现代码_javascript技巧

先了解下各事件的区别

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
}

时间: 2024-10-16 03:35:56

利用Keydown事件阻止用户输入实现代码_javascript技巧的相关文章

利用Keydown事件阻止用户输入实现代码

 这篇文章主要介绍了利用Keydown事件阻止用户输入的具体实现,需要的朋友可以参考下 先了解下各事件的区别    KeyDown:在控件有焦点的情况下按下键时发生  KeyPress:在控件有焦点的情况下按下键时发生  KeyUp: 在控件有焦点的情况下释放键时发生    1.KeyPress主要用来接收字母.数字等ANSI字符.KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键    2.KeyPress 只能捕获单个字符,KeyDo

如何利用Promises编写更优雅的JavaScript代码_javascript技巧

你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它们写出更优雅的 JavaScript 代码. Promises 易于阅读 比如说我们想从 HipsterJesus 的API中抓取一些数据并将这些数据添加到我们的页面中.这些 API 的响应数据形式如下: { "text": "<p>Lorem ipsum...<

canvas实现手机端用来上传用户头像的代码_javascript技巧

废话不多说了直接给大家介绍canvas实现手机端用来上传用户头像的代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> label{ height:40px; width:100px; border:1px solid #666; display:block; text-alig

zepto.js中tap事件阻止冒泡的实现方法_javascript技巧

本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效 现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.

利用Ext Js生成动态树实例代码_javascript技巧

一. 需求 要求生成一颗部门树,初始只列出根部门 当点击一个部门节点时,动态载入该部门下的直属子部门,并展开该部门节点 部门节点要求支持右键单击事件,当点击右键时,列出相关操作菜单 二. 关键类 这里主要涉及Ext JS的两个类: Ext.tree.TreeNode Ext.menu.Menu 相关API可以参考:http://extjs.com/deploy/ext/docs/ 三. 代码示例 1. 先看一下测试页面 复制代码 代码如下: <html> <head> <me

js 限制数字 js限制输入实现代码_javascript技巧

1.只能输入汉字的 复制代码 代码如下: <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"> 2.只能输入数字的 复制代码 代码如下: <input onkeyup

利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 1.使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多浏览器不支持,甚至在IE8想,XHTML4.0的loose.dtd是可以的,而去掉loose.dtd却不行. 2.使用div+javascript的方法.这种方法的好处是可以兼容几乎所有的浏览器,并且在可以预料的时间内仍能稳定运行.并且使用div使得网页可以利用现有的css资源实现很多炫目

一段利用WSH获取登录时间的jscript代码_javascript技巧

复制代码 代码如下: var enmProfile = new Enumerator(GetObject("winmgmts:").InstancesOf("Win32_NetworkLoginProfile"));  var arr = new Array("用户名\t最后登录时间");  while(!enmProfile.atEnd())  {          arr.push(enmProfile.item().Name + "

javascript利用初始化数据装配模版的实现代码_javascript技巧

var list = [{id:1, name:"czone", age:21}, {id:2, name:'czonechan', age:21}]; var template ='<div id="p$id"><span class="name">$name</span><span class="age">$age</span></div>'; 实现一