位置：首页>> 网络编程>> 网页设计>> 网页代码中键盘操作相关标签教程

网页代码中键盘操作相关标签教程

作者：hutia　来源：蓝色理想　发布时间：2010-03-18 15:56:00　

标签：键盘,标签,网页,Accesskey

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

不用编程部分

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 上捕获按键来自定义快捷键。

运行代码框

<script>// Author: Hutiavar pressedKeys=new Array();function chkKey(e){var e=window.event?window.event:e;var srcEle=e.srcElement?e.srcElement:e.target;var eType=e.type;var cK=keyChar(e).toLowerCase();switch(eType){case "keydown":if(allKeysUp()){if(document.documentElement.setCapture){document.documentElement.setCapture();document.documentElement.onlosecapture=resetKeys;}}pressedKeys[cK]=true;break;case "keyup":pressedKeys[cK]=false;if(allKeysUp())resetKeys();break;}if(pressedKeys["a"]&&pressedKeys["b"]&&pressedKeys["c"]){resetKeys();document.getElementById("a1").select();e.returnValue=false;}if(pressedKeys["d"]&&pressedKeys["b"]&&pressedKeys["x"]){resetKeys();document.getElementById("a2").select();e.returnValue=false;}}function resetKeys(){for(var i in pressedKeys)pressedKeys[i]=false;if(document.documentElement.releaseCapture){document.documentElement.onlosecapture=function(){};document.documentElement.releaseCapture();}}function allKeysUp(){for(var i in pressedKeys)if(pressedKeys[i])return(false);return(true);}function keyChar(e){ var e=window.event?window.event:e; if(e.shiftKey){ switch(e.keyCode.toString()){ case "96":return("0"); case "97":return("1"); case "98":return("2"); case "99":return("3"); case "100":return("4"); case "101":return("5"); case "102":return("6"); case "103":return("7"); case "104":return("8"); case "105":return("9"); case "111":return("/"); case "110":return("."); case "106":return("*"); case "109":return("-"); case "107":return("+"); case "144":return("numlock"); case "192":return("~"); case "49":return("!"); case "50":return("@"); case "51":return("#"); case "52":return("$"); case "53":return("％"); case "54":return("^"); case "55":return("&"); case "56":return("*"); case "57":return("("); case "48":return(")"); case "189":return("_"); case "187":return("+"); case "219":return("{"); case "221":return("}"); case "220":return("|"); case "20":return("caplock"); case "186":return(":"); case "222":return("\""); case "188":return("<"); case "190":return(">"); case "191":return("?"); case "8":return("backspace"); case "9":return("tab"); case "81":return("Q"); case "87":return("W"); case "69":return("E"); case "82":return("R"); case "84":return("T"); case "89":return("Y"); case "85":return("U"); case "73":return("I"); case "79":return("O"); case "80":return("P"); case "65":return("A"); case "83":return("S"); case "68":return("D"); case "70":return("F"); case "71":return("G"); case "72":return("H"); case "74":return("J"); case "75":return("K"); case "76":return("L"); case "16":return("shift"); case "90":return("Z"); case "88":return("X"); case "67":return("C"); case "86":return("V"); case "66":return("B"); case "78":return("N"); case "77":return("M"); case "17":return("ctrl"); case "91":return("win"); case "92":return("win"); case "18":return("alt"); case "32":return(" "); case "93":return("menu"); case "38":return("up"); case "40":return("down"); case "37":return("left"); case "39":return("right"); case "45":return("insert"); case "46":return("delete"); case "36":return("home"); case "35":return("end"); case "33":return("pageup"); case "34":return("pagedown"); case "34":return("printcreen"); case "145":return("scrolllock"); case "19":return("pause"); case "27":return("esc"); case "12":return("middle"); case "13":return("\r\n"); case "112":return("f1"); case "113":return("f2"); case "114":return("f3"); case "115":return("f4"); case "116":return("f5"); case "117":return("f6"); case "118":return("f7"); case "119":return("f8"); case "120":return("f9"); case "121":return("f10"); case "122":return("f11"); case "123":return("f12"); default:return("unknown"); } }else{ switch(e.keyCode.toString()){ case "96":return("0"); case "97":return("1"); case "98":return("2"); case "99":return("3"); case "100":return("4"); case "101":return("5"); case "102":return("6"); case "103":return("7"); case "104":return("8"); case "105":return("9"); case "111":return("/"); case "110":return("."); case "106":return("*"); case "109":return("-"); case "107":return("+"); case "144":return("numlock"); case "192":return("`"); case "49":return("1"); case "50":return("2"); case "51":return("3"); case "52":return("4"); case "53":return("5"); case "54":return("6"); case "55":return("7"); case "56":return("8"); case "57":return("9"); case "48":return("0"); case "189":return("-"); case "187":return("="); case "8":return("backspace"); case "9":return("tab"); case "81":return("q"); case "87":return("w"); case "69":return("e"); case "82":return("r"); case "84":return("t"); case "89":return("y"); case "85":return("u"); case "73":return("i"); case "79":return("o"); case "80":return("p"); case "219":return("["); case "221":return("]"); case "220":return("\\"); case "20":return("caplock"); case "65":return("a"); case "83":return("s"); case "68":return("d"); case "70":return("f"); case "71":return("g"); case "72":return("h"); case "74":return("j"); case "75":return("k"); case "76":return("l"); case "186":return(";"); case "222":return("'"); case "16":return("shift"); case "90":return("z"); case "88":return("x"); case "67":return("c"); case "86":return("v"); case "66":return("b"); case "78":return("n"); case "77":return("m"); case "188":return(","); case "190":return("."); case "191":return("/"); case "17":return("ctrl"); case "91":return("win"); case "92":return("win"); case "18":return("alt"); case "32":return(" "); case "93":return("menu"); case "38":return("up"); case "40":return("down"); case "37":return("left"); case "39":return("right"); case "45":return("insert"); case "46":return("delete"); case "36":return("home"); case "35":return("end"); case "33":return("pageup"); case "34":return("pagedown"); case "34":return("printcreen"); case "145":return("scrolllock"); case "19":return("pause"); case "27":return("esc"); case "12":return("middle"); case "13":return("\r\n"); case "112":return("f1"); case "113":return("f2"); case "114":return("f3"); case "115":return("f4"); case "116":return("f5"); case "117":return("f6"); case "118":return("f7"); case "119":return("f8"); case "120":return("f9"); case "121":return("f10"); case "122":return("f11"); case "123":return("f12"); default:return("unknown"); } }}document.documentElement.onkeydown=document.documentElement.onkeyup=chkKey;</script><input value="press a + b + c to focus on me." size="100" id="a1"><input value="press d + b + x to focus on me." size="100" id="a2">

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

运行代码框

<script>// Author: Hutiavar pressedKeys=new Array();function chkKey(e){var e=window.event?window.event:e;var srcEle=e.srcElement?e.srcElement:e.target;var eType=e.type;var cK=keyChar(e).toLowerCase();switch(eType){case "keydown":if(allKeysUp()){if(document.documentElement.setCapture){document.documentElement.setCapture();document.documentElement.onlosecapture=resetKeys;}}pressedKeys[cK]=true;break;case "keyup":pressedKeys[cK]=false;if(allKeysUp())resetKeys();break;}if(pressedKeys["a"]&&pressedKeys["b"]&&pressedKeys["c"]){resetKeys();document.getElementById("a1").select();e.returnValue=false;}if(pressedKeys["d"]&&pressedKeys["b"]&&pressedKeys["x"]){resetKeys();document.getElementById("a2").select();e.returnValue=false;}}function resetKeys(){for(var i in pressedKeys)pressedKeys[i]=false;if(document.documentElement.releaseCapture){document.documentElement.onlosecapture=function(){};document.documentElement.releaseCapture();}}function allKeysUp(){for(var i in pressedKeys)if(pressedKeys[i])return(false);return(true);}function keyChar(e){ var e=window.event?window.event:e; if(e.shiftKey){ switch(e.keyCode.toString()){ case "96":return("0"); case "97":return("1"); case "98":return("2"); case "99":return("3"); case "100":return("4"); case "101":return("5"); case "102":return("6"); case "103":return("7"); case "104":return("8"); case "105":return("9"); case "111":return("/"); case "110":return("."); case "106":return("*"); case "109":return("-"); case "107":return("+"); case "144":return("numlock"); case "192":return("~"); case "49":return("!"); case "50":return("@"); case "51":return("#"); case "52":return("$"); case "53":return("％"); case "54":return("^"); case "55":return("&"); case "56":return("*"); case "57":return("("); case "48":return(")"); case "189":return("_"); case "187":return("+"); case "219":return("{"); case "221":return("}"); case "220":return("|"); case "20":return("caplock"); case "186":return(":"); case "222":return("\""); case "188":return("<"); case "190":return(">"); case "191":return("?"); case "8":return("backspace"); case "9":return("tab"); case "81":return("Q"); case "87":return("W"); case "69":return("E"); case "82":return("R"); case "84":return("T"); case "89":return("Y"); case "85":return("U"); case "73":return("I"); case "79":return("O"); case "80":return("P"); case "65":return("A"); case "83":return("S"); case "68":return("D"); case "70":return("F"); case "71":return("G"); case "72":return("H"); case "74":return("J"); case "75":return("K"); case "76":return("L"); case "16":return("shift"); case "90":return("Z"); case "88":return("X"); case "67":return("C"); case "86":return("V"); case "66":return("B"); case "78":return("N"); case "77":return("M"); case "17":return("ctrl"); case "91":return("win"); case "92":return("win"); case "18":return("alt"); case "32":return(" "); case "93":return("menu"); case "38":return("up"); case "40":return("down"); case "37":return("left"); case "39":return("right"); case "45":return("insert"); case "46":return("delete"); case "36":return("home"); case "35":return("end"); case "33":return("pageup"); case "34":return("pagedown"); case "34":return("printcreen"); case "145":return("scrolllock"); case "19":return("pause"); case "27":return("esc"); case "12":return("middle"); case "13":return("\r\n"); case "112":return("f1"); case "113":return("f2"); case "114":return("f3"); case "115":return("f4"); case "116":return("f5"); case "117":return("f6"); case "118":return("f7"); case "119":return("f8"); case "120":return("f9"); case "121":return("f10"); case "122":return("f11"); case "123":return("f12"); default:return("unknown"); } }else{ switch(e.keyCode.toString()){ case "96":return("0"); case "97":return("1"); case "98":return("2"); case "99":return("3"); case "100":return("4"); case "101":return("5"); case "102":return("6"); case "103":return("7"); case "104":return("8"); case "105":return("9"); case "111":return("/"); case "110":return("."); case "106":return("*"); case "109":return("-"); case "107":return("+"); case "144":return("numlock"); case "192":return("`"); case "49":return("1"); case "50":return("2"); case "51":return("3"); case "52":return("4"); case "53":return("5"); case "54":return("6"); case "55":return("7"); case "56":return("8"); case "57":return("9"); case "48":return("0"); case "189":return("-"); case "187":return("="); case "8":return("backspace"); case "9":return("tab"); case "81":return("q"); case "87":return("w"); case "69":return("e"); case "82":return("r"); case "84":return("t"); case "89":return("y"); case "85":return("u"); case "73":return("i"); case "79":return("o"); case "80":return("p"); case "219":return("["); case "221":return("]"); case "220":return("\\"); case "20":return("caplock"); case "65":return("a"); case "83":return("s"); case "68":return("d"); case "70":return("f"); case "71":return("g"); case "72":return("h"); case "74":return("j"); case "75":return("k"); case "76":return("l"); case "186":return(";"); case "222":return("'"); case "16":return("shift"); case "90":return("z"); case "88":return("x"); case "67":return("c"); case "86":return("v"); case "66":return("b"); case "78":return("n"); case "77":return("m"); case "188":return(","); case "190":return("."); case "191":return("/"); case "17":return("ctrl"); case "91":return("win"); case "92":return("win"); case "18":return("alt"); case "32":return(" "); case "93":return("menu"); case "38":return("up"); case "40":return("down"); case "37":return("left"); case "39":return("right"); case "45":return("insert"); case "46":return("delete"); case "36":return("home"); case "35":return("end"); case "33":return("pageup"); case "34":return("pagedown"); case "34":return("printcreen"); case "145":return("scrolllock"); case "19":return("pause"); case "27":return("esc"); case "12":return("middle"); case "13":return("\r\n"); case "112":return("f1"); case "113":return("f2"); case "114":return("f3"); case "115":return("f4"); case "116":return("f5"); case "117":return("f6"); case "118":return("f7"); case "119":return("f8"); case "120":return("f9"); case "121":return("f10"); case "122":return("f11"); case "123":return("f12"); default:return("unknown"); } }}document.documentElement.onkeydown=document.documentElement.onkeyup=chkKey;</script><input value="press a + b + c to focus on me." size="100" id="a1"><input value="press d + b + x to focus on me." size="100" id="a2">

0

投稿

猜你喜欢

mysql Event Scheduler: Failed to open table mysql.event
其实这个错误按字面意思就是不能打开mysql.event表，那么就是权限问题导致的。一般mysql也无法运行。在本地计算机无法启动 My
Python面向对象总结及类与正则表达式详解
目录Python3 面向对象一丶面向对象技术简介对象可以包含任意数量和类型的数据。2.Python面向对象的三大特性一、继承二、
Numpy数组转置的两种实现方法
Numpy数组转置很容易，两种写法np_array = np.array([[1, 2], [3, 4]]) np_array.transp
如何使用PyCharm及常用配置详解
一、Python 的 IDE —— PyCharm1.1 集成开发环境（IDE）集成开发环境（IDE，Integrated Developm
如何在golang中使用shopspring/decimal来处理精度问题
在 Golang 中处理浮点数存在着精度问题，而精度问题会带来诸多的麻烦。因此，我们需要使用高精度数来解决这个问题。shopspring/d
做新产品？悠着点
看lifesinger的《由Kimi找茬想到的》，我想到的：1、我不同意将“合并付款”定调在“很多卖家都需要”。这个“很多”在卖家里面大概
mysql存储过程中使用游标的实例
DELIMITER $$DROP PROCEDURE IF EXISTS getUserInfo $$CREATE PROCEDURE ge
python3学习笔记之多进程分布式小例子
最近一直跟着廖大在学Python，关于分布式进程的小例子挺有趣的，这里做个记录。分布式进程Python的multiprocessing模块不
python学习之编写查询ip程序
公司服务器上的ip最少的也有100多个，有时候查到一个站的Ip, 不想通过OA去查，自己就用自己最近学的python知识，结合数据库，编写了
ASP同一站点下gb2312和utf-8页面传递参数乱码的终极解决方法
①.页面文件使用正确的编码，gb2312使用ANSI，utf-8使用utf-8； ②.ASP代码中设置正确的CODEPAGE，gb2312使
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
1.如果没有采用响应式布局，指定表格的宽度即可解决比如table{ width:1400px !important;}2.如果采用了响应式布
python中map、any、all函数用法分析
本文实例讲述了python中map、any、all函数用法。分享给大家供大家参考。具体分析如下：最近想学python，就一直比较关注pyth
JS组件Bootstrap实现弹出框和提示框效果代码
前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑
python中的 zip函数详解及用法举例
python中zip()函数用法举例定义：zip([iterable, ...])zip()是Python的一个内建函数，它接受一系列可迭代
python在html中插入简单的代码并加上时间戳的方法
建议用pycharm，使用比较方便，并且可以直接编辑html文件import timelocatime = time.strftime(&q
Python Pandas 对列/行进行选择，增加，删除操作
一、列操作1.1 选择列d = {'one' : pd.Series([1, 2, 3], index=['a
Python自动发送邮件的方法实例总结
本文实例讲述了Python自动发送邮件的方法。分享给大家供大家参考，具体如下：python发邮件需要掌握两个模块的用法，smtplib和em
asp javascript picasa相册外链批量导出
来与大家分享。稍加改造就可以实现更强大的功能了。用下面的代码就可以简单的批量导出picasa相册的外链了。代码如下:<％@LANGUA
Python for 循环语句的使用
Python for 循环语句Python for循环可以遍历任何序列的项目，如一个列表或者一个字符串。语法：for循环的语法格
如何在网页中制作虚线表格
icech: 在制作网页的时候，常常要遇到制作虚线表格的问题，下面的文章就能解决这个问题。方法一：作一个1X2的图。半黑半白，再利用表格作成

为什么首页最后设计

用FrontPage制作缩略图和图片重叠效果

中国目前流行的网页设计风格

略谈美国雅虎首页改版

为您解读CSS优先级

[译]如何设计网页小广告(banner)

纯手工打造CSS像素画

Dreamweaver量身打造Wordpress留言板（二）

利用CSS改善网站可访问性

就 CSS3 向 Eric Meyer 请教的 6 个问题

Mac上没有将文字转换为简体中文的选项怎么办？

Python排序算法之堆排序算法

使用go net实现简单的redis通信协议

食物语金秋愿林掉落物品有哪些？金秋愿林掉落详情介绍

Win7系统电脑不能宽带连接提示错误代码629的解决方法

如何关闭win10系统的WMI服务器？

碧蓝航线轻巡洋舰海伦娜META怎么样

重装系统之后电脑没声音了怎么办?

python (logging) 日志按日期、大小回滚的操作

如何在Windows 11 22H2 上启用和使用语音访问？

手机版 网络编程 asp之家 www.aspxhome.com