SYNCER

SYNCER

accesskey属性 - ショートカットキー

公開日:

accesskey属性は、ショートカットキーを設定するための属性です。ショートカットキーを入力すると、例えば、対象のハイパーリンクやボタンをクリックできます。

説明

accesskey属性の値にはボタンを指定して下さい。そのボタンがショートカットキーとなります。

HTML

<!-- sをショートカットキーにする -->
<a href="./" accesskey="s">リンク</a>

複数ある場合は、半角スペースで区切って指定します。複数指定した場合は、同時押しではなく、どちらかを押せば、という条件になります。下記の例ではs、または、0のボタンがショートカットキーとなります。

HTML

<!-- s、または、0をショートカットキーにする -->
<a href="./" accesskey="s 0">リンク</a>

ショートカットキーは、利用している端末のOSによって操作方法が違います。OSによっては、値を複数指定した場合に対応していないかもしれません。2017年2月現在、私のMacでは、複数の値を指定した時に反応しませんでした。

Mac
Control + Option + ???の同時押し。
Windows
Control + Alt + ???の同時押し。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】accesskey属性 - ショートカットキー</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/accesskey/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>accesskey属性は、ショートカットキーを設定するための属性です。</p>

<p>Macは<kbd><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>???</kbd></kbd>、Winodwsは<kbd><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd>???</kbd></kbd>の同時押しでショートカットキーになります。</p>

<h2>s</h2>
<a href="https://syncer.jp/" target="_blank" accesskey="s"><kbd>s</kbd>でリンクを開く</a>

<h2>1 or b</h2>
<a href="https://syncer.jp/" target="_blank" accesskey="1 b"><kbd>1</kbd>か<kbd>b</kbd>でリンクを開く</a>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>