Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@github/hotkey
Advanced tools
Readme
<button data-hotkey="Shift+?">Show help dialog</button>
Trigger an action on a target element when the hotkey (key or sequence of keys) is pressed on the keyboard. This triggers a focus event on form fields, or a click event on other elements.
The hotkey can be scoped to a form field:
<button data-hotkey-scope="text-area" data-hotkey="Meta+d" onclick="alert('clicked')">
press meta+d in text area to click this button
</button>
<textarea id="text-area">text area</textarea>
By default, hotkeys are extracted from a target element's data-hotkey
attribute, but this can be overridden by passing the hotkey to the registering
function (install
) as a parameter.
All shortcuts (for example g i
, .
, Meta+k
) within GitHub use hotkey to declare shortcuts in server side templates. This is used on almost every page on GitHub.
$ npm install @github/hotkey
<!-- Single character hotkey: triggers when "j" is pressed-->
<a href="/page/2" data-hotkey="j">Next</a>
<!-- Multiple hotkey aliases: triggers on both "s" and "/" -->
<a href="/search" data-hotkey="s,/">Search</a>
<!-- Key-sequence hotkey: triggers when "g" is pressed followed by "c"-->
<a href="/rails/rails" data-hotkey="g c">Code</a>
<!-- Hotkey with modifiers: triggers when "Control", "Alt", and "h" are pressed at the same time -->
<a href="/help" data-hotkey="Control+Alt+h">Help</a>
<!-- Special "Mod" modifier localizes to "Meta" on mac, "Control" on Windows or Linux-->
<a href="/settings" data-hotkey="Mod+s">Search</a>
See the list of KeyboardEvent
key values for a list of supported key values.
import {install} from '@github/hotkey'
// Install all the hotkeys on the page
for (const el of document.querySelectorAll('[data-hotkey]')) {
install(el)
}
Alternatively, the hotkey(s) can be passed to the install
function as a parameter e.g.:
for (const el of document.querySelectorAll('[data-shortcut]')) {
install(el, el.dataset.shortcut)
}
To unregister a hotkey from an element, use uninstall
:
import {uninstall} from '@github/hotkey'
for (const el of document.querySelectorAll('[data-hotkey]')) {
uninstall(el)
}
By default form elements (such as input
,textarea
,select
) or elements with contenteditable
will call focus()
when the hotkey is triggered. All other elements trigger a click()
. All elements, regardless of type, will emit a cancellable hotkey-fire
event, so you can customize the behaviour, if you so choose:
for (const el of document.querySelectorAll('[data-shortcut]')) {
install(el, el.dataset.shortcut)
if (el.matches('.frobber')) {
el.addEventListener('hotkey-fire', event => {
// ensure the default `focus()`/`click()` is prevented:
event.preventDefault()
// Use a custom behaviour instead
frobulateFrobber(event.target)
})
}
}
event.key
, and uses standard W3C key names for keys and modifiers as documented in UI Events KeyboardEvent key Values.,
. For example the hotkey a,b
would activate if the user typed a
or b
.g n
would activate when a user types the g
key followed by the n
key.+
and are prepended to a key in a consistent order as follows: "Control+Alt+Meta+Shift+KEY"
."Mod"
is a special modifier that localizes to Meta
on MacOS/iOS, and Control
on Windows/Linux.
"Mod+"
can appear in any order in a hotkey string. For example: "Mod+Alt+Shift+KEY"
Control
or Meta
modifiers should appear in a hotkey string with Mod
.event.key
on Mac and iOS when Meta
is pressed along with Shift
, it is recommended to avoid hotkey strings containing both Mod
and Shift
."Plus"
and "Space"
are special key names to represent the +
and
keys respectively, because these symbols cannot be represented in the normal hotkey string syntax.,
as a hotkey, e.g. a,,
would activate if the user typed a
or ,
. Control+,,x
would activate for Control+,
or x
.The following hotkey would match if the user typed the key sequence a
and then b
, OR if the user held down the Control
, Alt
and /
keys at the same time.
'a b,Control+Alt+/'
🔬 Hotkey Mapper is a tool to help you determine the correct hotkey string for your key combination: https://github.github.io/hotkey/pages/hotkey_mapper.html
Two-key-sequences such as g c
and g i
are stored
under the 'g' key in a nested object with 'c' and 'i' keys.
mappings =
'c' : <a href="/rails/rails/issues/new" data-hotkey="c">New Issue</a>
'g' :
'c' : <a href="/rails/rails" data-hotkey="g c">Code</a>
'i' : <a href="/rails/rails/issues" data-hotkey="g i">Issues</a>
In this example, both g c
and c
could be available as hotkeys on the
same page, but g c
and g
can't coexist. If the user presses
g
, the c
hotkey will be unavailable for 1500 ms while we
wait for either g c
or g i
.
Please note that adding this functionality to your site can be a drawback for certain users. Providing a way in your system to disable hotkeys or remap them makes sure that those users can still use your site (given that it's accessible to those users).
See "Understanding Success Criterion 2.1.4: Character Key Shortcuts" for further reading on this topic.
Wherever possible, hotkeys should be add to interactive and focusable elements. If a static element must be used, please follow the guideline in "Adding keyboard-accessible actions to static HTML elements".
npm install
npm test
Distributed under the MIT license. See LICENSE for details.
FAQs
```html Show help dialog ```
The npm package @github/hotkey receives a total of 5,199 weekly downloads. As such, @github/hotkey popularity was classified as popular.
We found that @github/hotkey demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.