重新认识HTML系列002——html全局属性讲解之accesskey

最新推荐文章于 2020-09-12 21:43:21 发布

hjb2722404

最新推荐文章于 2020-09-12 21:43:21 发布

阅读量910

点赞数

分类专栏： javascript基础理论研究文章标签： html

本文链接：https://blog.csdn.net/hjb2722404/article/details/72967031

版权

javascript基础理论研究专栏收录该内容

36 篇文章 4 订阅

订阅专栏

html全局属性讲解之——accesskey

查看文档

accesskey这个属性只有一个作用：提供对页面元素的快捷访问。

理论上，由于它是全局属性，所以所有元素都可以设置这个属性，但是，由于很多元素不具有可访问性，所以实际上，只有以下可激活元素设置了该属性才能达到快捷访问的效果：a，area，button，input ，label ，textarea。

至于accesskey是如何起作用的，我们来做实验：

html-accessksy.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML-accesskey</title>
</head>
<body>
<FORM action="http://www.baidu.com" method="post">
    <h3>LABAL</h3>
    <P>
        <LABEL for="fuser" accesskey="u">
            User Name
        </LABEL>
        <INPUT type="text" name="user" id="fuser">
    </P>
    <P>
        <LABEL for="fmotion" accesskey="M">
            Motion
        </LABEL>
        <INPUT type="text" name="user" id="fmotion">
    </P>
    <h3>A</h3>
    <P>
        <A href="http://www.baidu.com" target="_blank" accesskey="o">去百度</A>
    </P>
    <h3>textarea</h3>
    <p>
        <textarea name="textarea" id="textarea" accesskey="i" cols="30" rows="10"></textarea>
    </p>
    <h3>Input</h3>
    <p>
        <input type="text" id="input01" placeholder="input01" accesskey="q">
    </p>
    <!--input02实际上法无法通过accesskey获得焦点，因为其快捷键与浏览器自身快捷键冲突-->
    <p>
        <input type="text" id="bbb" placeholder="input02" accesskey="f">
    </p>
    <h3>area</h3>
    <img src="001.jpg" border="0" usemap="#planetmap" alt="Planets" />

    <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href ="1.html" alt="Venus" accesskey="1" />
        <area shape="circle" coords="129,161,10" href ="2.html" alt="Mercury" accesskey="2" />
        <area shape="rect" coords="0,0,110,260" href ="3.html" alt="Sun" accesskey="3"/>
    </map>
    <h3>button</h3>
    <p>
        <button type="reset" accesskey="r">重置</button>
    </p>
</FORM>
</body>
</html>

通过这样一个，我们将上面所列可以使用accesskey访问的元素都集中于一个页面内，并且为每个元素都设置了accesskey属性。

那么，accesskey 是如何起作用的呢？

实际上，比如某个元素设置了accesskey属性值为b，那么当我们在windows 平台下chrome 浏览器的组合键Alt+b时，该元素便会被激活。

注意上句中的斜体字，没错，触发该属性的组合功能键与平台相关，不同操作系统不同浏览器所使用的组合功能键都不一样，如下表：

mark

表中的a key，就代表元素accesskey的值，例如上例中的b

好，现在我们在windows平台的google chrome浏览器中打开我们的实验页面，并依次按下对应的accesskey组合键，结果如下：

当按下Alt+u时，id为fuser的input获得了焦点
当按下Alt+m时，id为fmotion的input获得了焦点
当按下Alt+o时，在新标签页打开了百度页面
当按下Alt+i时，textarea输入框获得了焦点
当按下Alt+q时，id为input01的input获得了焦点
当按下Alt+f时，弹出了浏览器的功能菜单 //！请注意这里
当按下Alt+1时，跳转到了1.html
当按下Alt+2时，跳转到了2.html
当按下Alt+3时，跳转到了3.html
当按下Alt+r时，将所有输入框中的值重置为空

通过以上结果，我们可知以下几点：

1.accesskey属性的值为一个按键值，并且不区分大小写（由label部分两个accesskey的值一个大写，一个为小写，但都可以获得焦点可知）
2.当设置的快捷组合键与浏览器自身快捷键有冲突时，accesskey属性不起作用。（如上例Alt+f）
3.当输入类元素（label、input、textarea）设置了accesskey时，按下其accesskey组合键将使其获得焦点
4.当链接类元素（a、area）设置了accesskey时，按下其accesskey组合键将直接跳转到对应的链接
5.当按钮来元素（button）设置了accesskey时，按下其accesskey组合键相当于对其进行了click操作。

总结

HTML全局属性accesskey，虽然可以提供对元素便捷的快速访问功能，但其建设成本有点高，第一是可设置的键值数量有限，第二是当设置了该属性来提供快速访问时，需要将对应的组合按键在显眼的地方提示页面消费者，而由于组合功能键的平台差异性，意味着在进行提示时需要判断平台，代价稍大。

所以该属性应该尽量用在需要用户频繁在鼠标与键盘之间进行切换的表单页面和图像热点区域比较多的页面。

hjb2722404

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
重新认识HTML系列002——html全局属性讲解之accesskey

html全局属性讲解之——accesskey 查看文档accesskey这个属性只有一个作用：提供对页面元素的快捷访问。理论上，由于它是全局属性，所以所有元素都可以设置这个属性，但是，由于很多元素不具有可访问性，所以实际上，只有以下可激活元素设置了该属性才能达到快捷访问的效果：a，area，button，input ，label ，textarea。至于accesskey是如何起作用的，我们来
复制链接

扫一扫

专栏目录