HTML accesskey 属性是一个全局属性,它为生成当前元素的键盘快捷键提供提示。
accesskey 属性与浏览器相关。它可能因浏览器而异。并支持所有HTML标签。属性值必须是单个字符,例如字母或数字。在 HTML5 中,accesskey 属性可以与任何标签一起使用,但在 HTML4.1 中,accesskey 属性只能与少数标签一起使用,包括 <a>、<area>、<button>、<input>、<label>、<legend> 和 <textarea>。
语法
<Tag accesskey = "single_character">
适用于
几乎所有的 HTML 标签都支持使用 accesskey 属性。
使用访问密钥的快捷方式
下表描述了使用访问密钥的快捷方式
浏览器 | Windows | Mac | Linux |
---|---|---|---|
Google chrome | Alt + single_char | Command + Alt + single_char | Alt + single_char |
Mozilla Firefox | Alt + Shift + single_char | Command + Alt + single_char | Alt + Shift + single_char |
Internet Explorer | Alt + single_char | NA | NA |
Safari | Alt + single_char | Command+Alt+single_char | NA |
Opera 15+ | Alt + single_char | Command+Alt+single_char | Alt + single_char |
下表描述了元素的激活
浏览器 | 激活方式 |
---|---|
Google chrome | 带有 accesskey 的最后一个元素将被激活。 |
Mozilla Firefox | 下一个带有 accesskey 的元素将被激活。 |
Internet Explorer | 下一个带有 accesskey 的元素将被激活。 |
Safari | 带有 accesskey 的最后一个元素将被激活。 |
Opera 15+ | 第一个带有 accesskey 的元素将被激活。 |
HTML accesskey 属性的示例
下面的示例将说明 HTML accesskey 属性,我们应该在哪里以及如何使用此属性!
使用 accesskey 属性定义超链接的快捷方式
在以下示例中,我们将创建一个 HTML 文档,并使用我们定义的快捷方式的 accesskey 属性来访问外部网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML accesskey Attribute</title>
<style>
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<h1>Accesskey Attribute Example</h1>
<p>Use the following access keys to navigate quickly:</p>
<ul>
<li>
<strong>Alt + H</strong> (Windows) or
<strong>Ctrl + Option + H</strong> (Mac) - Go to HTML 教程
</li>
<li>
<strong>Alt + C</strong> (Windows) or
<strong>Ctrl + Option + C</strong> (Mac) - Go to CSS 教程
</li>
<li>
<strong>Alt + P</strong> (Windows) or
<strong>Ctrl + Option + P</strong> (Mac) - Go to PHP 教程
</li>
</ul>
<h3>Select QikepuCom or press shortcut....</h3>
<nav class="navbar">
<a href="/html/index.htm" accesskey="h">HTML</a>
<a href="/css/index.htm" accesskey="c">CSS</a>
<a href="/php/index.htm" accesskey="p">PHP</a>
</nav>
</body>
</html>
使用 accesskey 属性聚焦输入标签
这里访问键与输入标签一起使用,以改变不同输入元素的焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML accesskey Attribute</title>
</head>
<body>
<h2>Input Field with Accesskey</h2>
<p>Use the following access keys to navigate quickly:</p>
<ul>
<li>
<strong>Alt + N</strong> (Windows) or
<strong>Ctrl + Option + N</strong> (Mac) - Focus Name input
</li>
<li>
<strong>Alt + M</strong> (Windows) or
<strong>Ctrl + Option + M</strong> (Mac) - Focus Message area
</li>
</ul>
<br><br>
<form action="/html/index.htm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" accesskey="n"
placeholder="Enter your name" autofocus>
<br><br>
<label for="message">Message:</label>
<br>
<textarea id="message" name="message" rows="4" cols="50"
accesskey="m" placeholder="Enter your message">
</textarea>
<br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
是否支持 | Yes | Yes | Yes | Yes | Yes |