Getting the browser+platform keyboard modifiers
Just use accessKeyLabel
:
const btn = document.getElementById("btn"),
keyCombParagraph = document.getElementById("key-comb");
{
const label = btn.accessKeyLabel;
keyCombParagraph.innerHTML = label ?
`This button can be activated by pressing ${label}.` :
`This button doesn't have an assigned access key.`;
}
btn.addEventListener("click", () => {
alert("Hello.");
});
<button id="btn" accesskey="h">Hello</button>
<p id="key-comb"></p>
Note that the spec does not define a format for accessKeyLabel
and contains the following note:
Browsers on different platforms will show different labels, even for the same key combination, based on the convention prevalent on that platform. For example, if the key combination is the Control key, the Shift key, and the letter C, a Windows browser might display "Ctrl+Shift+C", whereas a Mac browser might display "^⇧C", while an Emacs browser might just display "C-C". Similarly, if the key combination is the Alt key and the Escape key, Windows might use "Alt+Esc", Mac might use "⌥⎋", and an Emacs browser might use "M-ESC" or "ESC ESC".
In general, therefore, it is unwise to attempt to parse the value returned from the accessKeyLabel IDL attribute.