HTML - accesskey 属性_HTML 菜鸟教程

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

<< HTML - wrap 属性 HTML - 全局 class 属性 >>