| category | created | tags | title |
|---|---|---|---|
Trick |
2021-03-14 |
HTML |
Add keyboard shortcuts |
By using the accesskey attribute, we can specify a shortcut key for the user to activate or focus on an element. The value of the attribute has to be a single character.
It's worth noting that each browser provides a different combination of keys to access the shortcut.
| Browser | macOS | Windows | Linux |
|---|---|---|---|
| Chrome | alt + ctrl + key |
alt + key |
alt + key |
| Firefox | alt + ctrl + key |
alt + shift + key |
alt + shift + key |
| Safari | alt + ctrl + key |
n/a | n/a |
In the following sample code, pressing the combination alt + ctrl + e on Chrome macOS will trigger the button's click event.
<button accesskey="e" onclick="alert('Edit')">Edit</button>