accesskey属性 显示“快捷键清单”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html  lang = "en" >
< head >
< meta  charset = "utf-8" >
< title >Explaining the Ddocument Ob Model</ title >
< script  src = "addLoadEvent.js" ></ script >
< script  src = "8.6.js" ></ script
 
</ head >
< body >
< ul  id = "navgation" >
< li >< a  href = "index.html"  accesskey = "1" >Home</ a ></ li >
< li >< a  href = "search.html"  accesskey = "4" >Search</ a ></ li >
< li >< a  href = "contact.html"  accesskey = "9" >Contact</ a ></ li >
</ ul >
< p >< b >注释:</ b >请使用Alt + < i >accessKey</ i > (或者 Shift + Alt + < i >accessKey</ i >) 来访问带有指定快捷键的元素。</ p >
</ body >
</ html >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function  addLoadEvent(func){     //不管在页面加载完毕执行多少个函数,都应付自如
  var  oldonload = window.onload;
if ( typeof  window.onload !=  'function' ){
window.onload = func;
} else {
window.onload =  function (){
oldonload();
func();
}
}
}
 
function  displayAccesskeys(){
//检查兼容性
if (!document.getElementsByTagName||!document.createElement||!document.createTextNode)  return  false ;
 
var  links = document.getElementsByTagName( "a" );
var  akeys =  new  Array();
for ( var  i = 0; i<links.length; i++){
var  current_link = links[i];
if (!links[i].getAttribute( "accesskey" ))  continue ;
var  key = current_link.getAttribute( "accesskey" );
var  text = current_link.lastChild.nodeValue;   //取得链接文本
akeys[key] = text;
}
var  list = document.createElement( "ul" ); 
for  (key  in  akeys){   //遍历访问键
var  text = akeys[key];
var  str = key + ": " +text;
var  item = document.createElement( "li" );
var  item_text = document.createTextNode(str);
item.appendChild(item_text);
list.appendChild(item);
}
var  header = document.createElement( "h3" )   //创建标题;
var  header_text = document.createTextNode( "Accesskeys" );
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(list);
}
 
addLoadEvent(displayAccesskeys);

浏览器效果预览

wKioL1dHAv_Sl8Y3AAAdLK3nR90809.png-wh_50

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1783649

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值