作为表单交互设计的一个基本元素，accesskey属性在windows面板中使用得很多，可我们的程序员们却都对它不感兴趣，当然这和我们的非拼音文字有很大的关系。但如果是类似电信营业、财务等需要大量录入的系统，只用鼠标显然是愚蠢的。当然 tab 和→←↑↓也可以满足很多需求。简单地理解就是 — 没有鼠标，一样也可以自由的在网页中穿行。

下面只说 accesskey

</p> <p><label for="oName" accesskey="n">姓名：<br /> <input id="oName" name="oName" /></label></p> <p><a href="#1" accesskey="g" onclick="alert('hi!im guoshuang.')">guoshuang</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

在windows中，按 alt+n 键切换焦点到 oName 表单域中；Mac，按 ctrl+n；opera 是个特例，需要 shift+ESC+n 。

类似地，链接也可以通过这样的操作来获得（甚至直接触发）焦点。

当然，用户不可能看源代码去找这个 accesskey，所以我们需要在表单中注明：

</p> <style type="text/css"> <p>.em {color:#c00;text-decoration:underline;}</p> <p>input:focus {background:#efe}</p> </style> <form> <p><label for="oName" accesskey="n">姓名(<span class="em">n</span>)：<br /> <input id="oName" name="oName" /></label></p> </form> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

进一步,可以通过样式表 :after 来减少代码量。很遗憾，IE 6 看不到效果。

</p> <style type="text/css"> <p>a {text-decoration:none;color:#333;}</p> <p>a:hover {background:#fee}</p> <p>a:focus {background:#efe}</p> <p>a[accesskey]:after {content:” (”attr(accesskey)”)”;color:#600;font-size:smaller}</p> </style> <p><a href="#1" accesskey="h" onclick="alert('back home!')">Home</a></p> <p><a href="#1" accesskey="g" onclick="alert('guoshuang blog?')">Blog</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这里有个小问题需要解释一下。很多采用网页新标准的 blog 会使用 1,2,3…做为主导航的 accesskey，这在opera下面会有问题，因为 opera 的功能键是 shift+ESC，因为shift所以 1 不起作用，！可以。用opera看下面小例子，其它浏览器没有这个问题。

</p> <p><a href="#1" accesskey="1" onclick="alert('accesskey is 1.')">guoshuang 1</a></p> <p><a href="#1" accesskey="!" onclick="alert('accesskey is !.')">guoshuang !</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

还可以通过 title 来提示用户可使用的 accesskey

</p> <p><a href="#1" accesskey="g" onclick="alert('accesskey is 1.')" title="g">guoshuang 1</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

为了代码更漂亮更简洁,可以js 来自动装换 accesskey -> title，这是导航菜单

</p> <p><base target="_blank"></p> <style type="text/css"> <p>* {font:12px/130% tahoma,sans-serif;}</p> <p>a {text-decoration:none;color:#630;border-right:solid 1px #999;padding-right:4px;padding-left:3px;}</p> <p>a:hover {background:#fee}</p> <p>a:focus {background:#efe}}</p> </style> <p><a href="index.asp" accesskey="i">首页</a></p> <p><a href="index.asp?vt=bycat&cat_id=31" accesskey="c">脚本代码</a></p> <p><a href="index.asp?vt=bycat&cat_id=32" accesskey="w">工作日志</a></p> <p><a href="index.asp?vt=bycat&cat_id=37" accesskey="b">BT文化</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

加入提示效果后：

</p> <p><base target="_blank"></p> <style type="text/css"> <p>* {font:12px/130% tahoma,sans-serif;}</p> <p>a {text-decoration:none;color:#630;border-right:solid 1px #999;padding-right:4px;padding-left:3px;}</p> <p>a:hover {background:#fee}</p> <p>a:hover:after {content:" ("attr(accesskey)")";font-size:10px;color:#999;}</p> <p>a:focus {background:#efe}}</p> </style> <p><a href="index.asp" accesskey="i">首页</a></p> <p><a href="index.asp?vt=bycat&cat_id=31" accesskey="c">脚本代码</a></p> <p><a href="index.asp?vt=bycat&cat_id=32" accesskey="w">工作日志</a></p> <p><a href="index.asp?vt=bycat&cat_id=37" accesskey="b">BT文化</a></p> <p><script></p> <p>function ua(str){</p> <p>haveUa=navigator.userAgent.toLowerCase().indexOf(str)+1;</p> <p>return haveUa;</p> <p>}</p> <p>window.onload=function(){</p> <p>if (document.getElementsByTagName){</p> <p>oLinks=document.getElementsByTagName("a");</p> <p>for(i=0;i<oLinks.length;i++){</p> <p> if(ua("opera")){</p> <p> oLinks[i].setAttribute("title","快捷方式：Shift+Esc+"+oLinks[i].getAttribute("accesskey"))</p> <p> }else if(ua("mac")){</p> <p> oLinks[i].setAttribute("title","快捷方式：Ctrl+"+oLinks[i].getAttribute("accesskey"))</p> <p> }else if(ua("win")){</p> <p> oLinks[i].setAttribute("title","快捷方式：Alt+"+oLinks[i].getAttribute("accesskey"))</p> <p> }</p> <p> }</p> <p>}</p> <p>}</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]