HTML accesskey属性でラベル(labelタグ)にショートカットのキーを付与する

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119

構文
<label accesskey="値">
label要素にaccesskey属性を追加します。
WindowsのGoogle Chromeではalt+keyです。
ラベルにショートカットのキーを付与できます。
accesskey グローバル属性は、現在の要素のショートカットキーを生成するためのヒントを与えます。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<label accesskey="a"><input type="radio" name="city" value="to" checked>東京(a)</label>
<label accesskey="b"><input type="radio" name="city" value="os">大阪(b)</label>
<label accesskey="c"><input type="radio" name="city" value="fu">福岡(c)</label>
</body>
</html>
<!DOCTYPE html> <html> <body> <label accesskey="a"><input type="radio" name="city" value="to" checked>東京(a)</label> <label accesskey="b"><input type="radio" name="city" value="os">大阪(b)</label> <label accesskey="c"><input type="radio" name="city" value="fu">福岡(c)</label> </body> </html>
<!DOCTYPE html>
<html>
<body>

<label accesskey="a"><input type="radio" name="city" value="to" checked>東京(a)</label>
<label accesskey="b"><input type="radio" name="city" value="os">大阪(b)</label>
<label accesskey="c"><input type="radio" name="city" value="fu">福岡(c)</label>


</body>
</html>

結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
「Alt + a」キーを押すと、「東京(a)」が選択されます。
「Alt + b」キーを押すと、「大阪(b)」が選択されます。
「Alt + c」キーを押すと、「福岡(c)」が選択されます。
「Alt + a」キーを押すと、「東京(a)」が選択されます。 「Alt + b」キーを押すと、「大阪(b)」が選択されます。 「Alt + c」キーを押すと、「福岡(c)」が選択されます。
「Alt + a」キーを押すと、「東京(a)」が選択されます。
「Alt + b」キーを押すと、「大阪(b)」が選択されます。
「Alt + c」キーを押すと、「福岡(c)」が選択されます。

 

Html

Posted by arkgame