[教程]用代码让你了解网页与键盘

作者：Hutia 来源：经典论坛时间：2008-06-10 12:18:00　

从最基础的说起。本教程中，所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。

1. 不用编程的部分

1.1 Form 中。 submit 的快捷键是 enter,reset 的快捷键是 esc。

1.1.1 在 IE 中，按下enter 键后却不会激发 submit 的 onclick 事件, 按下esc 键后会激发 reset 的 onclick 事件

1.1.2 在 FF 中与 IE 正相反，按下enter 键后会激发 submit 的 onclick 事件, 按下esc 键后却不会激发 reset 的 onclick 事件

1.1.3 在 form 中，时间激发顺序是： submit 按钮的 onclick ==> form 的 onsubmit

<form onsubmit="alert('I am submiting');return false;"><input value="focus me, the press enter key or esc key" size=100><br><input type=submit onclick="alert('submit button is clicked');"><input type=reset onclick="alert('reset button is clicked');"></form><script>document.forms[0].elements[0].focus();</script>

1.2. Accesskey 属性。

1.2.1 注意 accesskey 的设置如果和浏览器的菜单相同，会优先于菜单。使用时的快捷键是 alt + 设置的键值

1.2.2 label 的 for 属性配合 accesskey 效果较好

1.2.3 在IE 中，Link 对象的 accesskey 只是使焦点转移到 link 上，并不等同于点击，FF 中则相当于点击. 与他对比的是，input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。

<input accesskey="q" value="press alt + q to focus me." size="100"><input accesskey="a" value="press alt + a you can focus me." size="100"><hr><h4>Use Label:</h4><label for="nnn1" accesskey="d">A<u>d</u>dress</label><input id="nnn1" value="press alt + d you can focus me." size="100"><hr><h4>Link:</h4><a accesskey="f" href="#link" onclick="alert('Link is clicked.');">press alt + f to focus me.</a><br><input type=checkbox accesskey="w" href="#link" onclick="alert('Checkbox is clicked.');" />press alt + w to focus me.

2. 然后就需要编程了

2.1 简单的按键捕获。

2.1.1 事件有 onkeydown, onkeypress, onkeyup

2.1.2 IE 与 FF 的事件写法不同，请学习下面的代码
<script>// Author: Hutia function chkKey(e){var e=window.event?window.event:e;var srcEle=e.srcElement?e.srcElement:e.target;var eType=e.type;srcEle.value+="\r\nEvent:"+eType+";\tKey Code:"+e.keyCode+"\t";e.returnValue=false;}</script><textarea onkeydown="chkKey(arguments[0]);" onkeyup="chkKey(arguments[0]);" onkeypress="chkKey(arguments[0]);" style="width:98％; height:400px;overflow:auto;"></textarea>

2.2 因为事件会冒泡，所以，可以在 document 上捕获按键来自定义快捷键。

3. 为了满足fmt00的要求，特写下此段，希望 fmt00 能够喜欢，哈哈

标签：键盘,网页,javascript

投稿

[教程]用代码让你了解网页与键盘

猜你喜欢

linux下安装easy_install的方法

Tensorflow 多线程设置方式

pygame实现贪吃蛇游戏（上）

Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】

用sleep间隔进行python反爬虫的实例讲解

python使用turtle绘制分形树

在WordPress的后台中添加顶级菜单和子菜单的函数详解

python flask 多对多表查询功能

ASP中利用正则表达式实现论坛UBB代码转换

python3.7+selenium模拟淘宝登录功能的实现

python实现员工管理系统

浅谈beego默认处理静态文件性能低下的问题

一文搞懂python异常处理、模块与包

python mqtt 客户端的实现代码实例

OracleEXP和IMP用法和介绍

python中的json数据和pyecharts模块入门示例教程

巧用局部变量提升javascript性能

PHP中集成PayPal标准支付的实现方法分享

PyTorch CUDA环境配置及安装的步骤(图文教程)

在Python中使用判断语句和循环的教程