- 浏览: 100168 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
xwpxcom:
Springmvc学习笔记一(maven项目创建与配置) -
leaow567:
表达不严谨“用户自定义的ClassLoader有ExtClas ...
openfire源码解读第一节----ClassLoader的认识与理解 -
leaow567:
顶起!一起学习
openfire源码解读第一节----ClassLoader的认识与理解 -
xs.cctv:
信科
Springmvc学习笔记一(maven项目创建与配置) -
ywbrj042:
我们也在用这个,也在看openfire的源代码。以后可以一起交 ...
openfire源码解读第一节----ClassLoader的认识与理解
在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件。
在form中, submit的快捷键是
enter,reset的快捷键是
esc。不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的
onclick → form 的 onsubmit。
- <html dir="ltr" lang="zh-CN">
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <title>键盘事件</title>
- </head>
- <body>
- <h3>键盘事件</h3>
- <form onsubmit="alert('Form is submiting');return false;">
- <p><input type="text" value="将焦点聚焦于文本域中,然后按回车键或Esc键"
/></p>
- <p><input type="submit" onclick="alert('submit button is
clicked');" value="submit"/>
- <input type="reset" onclick="alert('reset button is clicked');"
value="reset" />
- </p>
- </form>
- </body>
- </html>
不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下:
1.
如果表单里有一个type="submit"的按钮,回车键生效。
2.
如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效。
3.
如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
4.
其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
5.
type="image"的input,效果等同于type="submit"。不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。
除了在按钮中绑定键盘事件外,浏览器还有一个accesskey
属性来指定链接的快捷键。注意 accesskey 的设置如果和浏览器的菜单相同,会优先于菜单。在IE中,快捷键是 alt +
设置的键值,FF是Alt+Shift+ 设置的键值。 在IE 中,a元素的 accesskey 只是使焦点转移到链接上,并不等同于点击,FF
中则相当于点击。与他对比的是,input type=checkbox 的 accesskey 效果不论在IE 还是 FF
中都是点击。另外,我们还可以配合label标签来加强语义,个人是十分推荐这种做法的。
剩下的就需要编程了。javascript事件主要通过以下三个事件来捕获键盘事件:onkeydown,onkeypress与onkeyup。该三个事件的执行顺序如下:onkeydown
-> onkeypress
->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。
onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。
由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup
键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、
onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和副键盘数字键的,而onkeydown、onkeyup
的keyCode对主副键盘的数字键敏感。
- <!doctype html>
- <html dir="ltr" lang="zh-CN">
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <title>键盘事件</title>
- <style type="text/css">
- td {
- text-align:center;
- }
- </style>
- <script type="text/javascript">
- window.onload=function(){
- document.onkeydown = showKeyDown
- document.onkeyup = showKeyUp
- document.onkeypress = showKeyPress
- }
- function showKeyDown(evt) {
- evt = (evt) ? evt : window.event
- document.getElementById("pressKeyCode").innerHTML = 0
- document.getElementById("upKeyCode").innerHTML = 0
- document.getElementById("pressCharCode").innerHTML = 0
- document.getElementById("upCharCode").innerHTML = 0
- restoreModifiers("")
- restoreModifiers("Down")
- restoreModifiers("Up")
- document.getElementById("downKeyCode").innerHTML =
evt.keyCode
- if (evt.charCode) {
- document.getElementById("downCharCode").innerHTML =
evt.charCode
- }
- showModifiers("Down", evt)
- }
- function showKeyUp(evt) {
- evt = (evt) ? evt : window.event
- document.getElementById("upKeyCode").innerHTML =
evt.keyCode
- if (evt.charCode) {
- document.getElementById("upCharCode").innerHTML =
evt.charCode
- }
- showModifiers("Up", evt)
- return false
- }
- function showKeyPress(evt) {
- evt = (evt) ? evt : window.event
- document.getElementById("pressKeyCode").innerHTML =
evt.keyCode
- if (evt.charCode) {
- document.getElementById("pressCharCode").innerHTML =
evt.charCode
- }
- showModifiers("", evt)
- return false
- }
- function showModifiers(ext, evt) {
- restoreModifiers(ext)
- if (evt.shiftKey) {
- document.getElementById("shift" +
ext).style.backgroundColor = "#ff0000"
- }
- if (evt.ctrlKey) {
- document.getElementById("ctrl" +
ext).style.backgroundColor = "#00ff00"
- }
- if (evt.altKey) {
- document.getElementById("alt" + ext).style.backgroundColor
= "#0000ff"
- }
- }
- function restoreModifiers(ext) {
- document.getElementById("shift" + ext).style.backgroundColor =
"#ffffff"
- document.getElementById("ctrl" + ext).style.backgroundColor =
"#ffffff"
- document.getElementById("alt" + ext).style.backgroundColor =
"#ffffff"
- }
- </script>
- </head>
- <body>
- <h3>键盘事件</h3>
- <form>
- <table border=1 cellpadding="2" cellspacing="0">
- <tr>
- <th></th>
- <th>onKeyDown</th>
- <th>onKeyPress</th>
- <th>onKeyUp</th>
- </tr>
- <tr>
- <th>Key Codes</th>
- <td id="downKeyCode">0</td>
- <td id="pressKeyCode">0</td>
- <td id="upKeyCode">0</td>
- </tr>
- <tr>
- <th>Char Codes (IE5/Mac; NN6)</th>
- <td id="downCharCode">0</td>
- <td id="pressCharCode">0</td>
- <td id="upCharCode">0</td>
- </tr>
- <tr>
- <th rowspan="3">Modifier Keys</th>
- <td><span
id="shiftdown">Shift</span></td>
- <td><span
id="shift">Shift</span></td>
- <td><span
id="shiftUp">Shift</span></td>
- </tr>
- <tr>
- <td><span
id="ctrlDown">Ctrl</span></td>
- <td><span
id="ctrl">Ctrl</span></td>
- <td><span
id="ctrlUp">Ctrl</span></td>
- </tr>
- <tr>
- <td><span
id="altdown">Alt</span></td>
- <td><span
id="alt">Alt</span></td>
- <td><span
id="altUp">Alt</span></td>
- </tr>
- </table>
- </form>
- </body>
- </html>
我们可以利用以下脚本来监听网页中的键盘事件,一旦用户按下Enter键便开始你绑定的事件。
- function getKey(e){
- e = e || window.event;
- var keycode = e.which ? e.which : e.keyCode;
- if(keycode == 13 || keycode == 108){ //如果按下ENTER键
- //在这里设置你想绑定的事件
- }
- }
- // 把keyup事件绑定到document中
- function listenKey ( ) {
- if (document.addEventListener) {
- document.addEventListener("keyup",getKey,false);
- } else if (document.attachEvent) {
- document.attachEvent("onkeyup",getKey);
- } else {
- document.onkeyup = getKey;
- }
- }
发表评论
-
文本框只允许输入中文
2012-05-26 18:35 1025群友写的 顺手牵羊 保存了 只能输入中文:<in ... -
最新的qq号的验证
2012-05-18 22:43 700!/^[1-9]\d{4,9}$/.test("45 ... -
javaScript设计模式中的掺元类
2012-04-22 10:01 1336今天虽然周末但是没有撒懒,因为媳妇要上班所以我得送她下去,一方 ... -
JS递归将字符串中的字符替换为目标字符
2011-04-06 21:43 930//repStr:原字符串--rgExp:被替换的字符-- ... -
浮点计算方法
2011-01-20 12:57 893//浮点数加法运算 function FloatAdd(a ... -
JavaScript使用技巧精萃
2011-01-15 17:23 819(一).确认删除用法: 1. BtnDel.A ... -
JavaScript判断是否为数组
2011-01-15 17:17 829判断一个对象是否为数组比较麻烦,以下是我收集的各种版本 Do ... -
JavaScript通用的加入收藏夹代码
2011-01-15 17:15 1060<script type="text/jav ... -
jQuery对下拉框、单选框、多选框的处理
2011-01-15 17:13 1105下拉框: //得到 ... -
Firefox和IE之间7个JavaScript的差异
2011-01-15 17:12 684尽管 Java Script 历史上使用冗长而令人生厌的 ... -
JavaScript语法中12个需要绕开的陷阱
2011-01-15 17:10 7021. == Java script有两组 ... -
JavaScript类和继承:this属性
2011-01-15 17:04 768this属性表示当前对象,如果在全局作用范围内使用thi ... -
JavaScript类和继承:prototype属性
2011-01-15 17:03 726我们已经在第一章中使用prototype属性模拟类和继承的实现 ... -
JavaScript类和继承:constructor属性
2011-01-15 17:02 655constructor属性始终指向创建当前对象的构造函数。比 ... -
浅析Javascript闭包的特性
2011-01-15 17:01 677Java script闭包的定义非常晦涩——闭包,是指语法域 ... -
浅谈不用Cookie实现高亮Javascript菜单效果
2011-01-15 17:00 952笔者经常采用的高亮Java script菜单效果设计方式,一 ... -
10个最常用的JavaScript自定义函数
2011-01-15 16:57 929Java Script自定义函数在平时的开发过程中比较实用, ... -
详解JavaScript中的Array扩展
2011-01-15 16:54 694Java script中的Array扩展,一般都是从 ... -
JavaScript常用的2种定义类的方式
2011-01-15 16:51 6321. 混合构造函数/原型方式 functio ... -
使用jQuery制作滑动动画效果的层
2011-01-15 16:43 757基本原理 这些具有动态效果的滑动盒都基于同样的基本原理。 ...
相关推荐
JavaScript键盘事件测试小结,相信可能会对您的工作有一定的帮助作用
1.实现JavaScript事件注册; 2.实现JavaScript事件处理函数;...3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个type=”submit”的按钮,回车键生效。 2. 如果表单里...
2 教学内容 1 单元目标 3 动手实践 4 课堂小结 教学内容 事件的含义 JavaScript事件处理 JavaScript表单事件 JavaScript鼠标事件 JavaScript键盘和窗口事件 综合应用 事件是一些可以通过脚本响应的页面动作。...
常用的软件盘,(网上找的)和自己修改 自己写的人民币的 下下来看看,挺帅的 mojianpo@gmail.com
5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 ...
5.8 JavaScript语句小结116 第6章 对象118 6.1 创建对象120 6.2 属性的查询和设置123 6.3 删除属性127 6.4 检测属性128 6.5 枚举属性130 6.6 属性getter和setter132 6.7 属性的特性134 6.8 对象...
5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章...
5.8 javascript语句小结 116 第6章 对象 118 6.1 创建对象 120 6.2 属性的查询和设置 123 6.3 删除属性 127 6.4 检测属性 128 6.5 枚举属性 130 6.6 属性getter和setter 132 6.7 属性的特性 134 6.8 对象的三个属性 ...
5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 ...
5.8 JavaScript语句小结116 第6章 对象118 6.1 创建对象120 6.2 属性的查询和设置123 6.3 删除属性127 6.4 检测属性128 6.5 枚举属性130 6.6 属性getter和setter132 6.7 属性的特性134 6.8 对象...
第一部分 深入理解DOM脚本编程 第1章 遵循最佳实践 1.1 不唐突和渐进增强 1.2 让JavaScript运行起来 1.2.1 把行为从结构中分离出来 1.2.2 不要版本检测 ... 12.9 小结
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 ...
jQuery之父经典著作新版 系统总结JavaScript语言特点 直击JavaScript本质 印刷时间:2016年09月01日 本书是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web...
5.8 javascript语句小结 116 第6章 对象 118 6.1 创建对象 120 6.2 属性的查询和设置 123 6.3 删除属性 127 6.4 检测属性 128 6.5 枚举属性 130 6.6 属性getter和setter 132 6.7 属性的特性 134 6.8 对象的三个属性 ...
5.8 JavaScript语句小结 第6章 对象 6.1 创建对象 6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 ...
5.8 javascript语句小结 116 第6章 对象 118 6.1 创建对象 120 6.2 属性的查询和设置 123 6.3 删除属性 127 6.4 检测属性 128 6.5 枚举属性 130 6.6 属性getter和setter 132 6.7 属性的特性 134 6.8 对象的三个属性 ...
本文给大家简单总结了下jQuery中键盘事件的使用方法以及相关示例,非常的实用,有需要的小伙伴可以参考下。