Hotkeys
HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb) (gzipped: 1.73kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks. Official document demo preview.
╭┈┈╮ ╭┈┈╮ ╭┈┈╮┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯ ╰┈┈┈┈┈╯
Usage
You will need Node.js
installed on your system.
$ npm install hotkeys-js --save
; ;
Or manually download and link hotkeys.js in your HTML, It can also be downloaded via UNPKG:
Used in React
react-hotkeys is the React component that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
$ npm install react-hot-keys --save
Detailed use method please see its documentation react-hotkeys.
import React Component from 'react';import Hotkeys from 'react-hot-keys'; { ; thisstate = output: 'Hello, I am a component that listens to keydown and keyup of a' } { this } { this } { return <Hotkeys ="shift+a,alt+s" = = > <div => thisstateoutput </div> </Hotkeys> }
Browser Support
Hotkeys.js has been tested and should work in.
Internet Explorer 6+SafariFirefoxChrome
Supported Keys
HotKeys understands the following modifiers: ⇧
, shift
, option
, ⌥
, alt
, ctrl
, control
, command
, and ⌘
.
The following special keys can be used for shortcuts: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete and f1 through f19.
⌘
Command()
⌃
Control
⌥
Option(alt)
⇧
Shift
⇪
Caps Lock(Capital)
fn
Does not support fn
↩︎
return/Enter space
Defining Shortcuts
One global method is exposed, key which defines shortcuts when called directly.
hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>])
; // Returning false stops the event and prevents default browser events// Mac OS system defines `command + r` as a refresh shortcut; ; ; ;
option
scope<String>
element<HTMLElement>
;
API REFERENCE
Asterisk "*"
Modifier key judgments
;
setScope
Use the hotkeys.setScope
method to set scope.
// define shortcuts with a scope;; // set the scope (only 'all' and 'issues' shortcuts will be honored)hotkeys; // default scope is 'all'
getScope
Use the hotkeys.getScope
method to get scope.
hotkeys;
deleteScope
Use the hotkeys.deleteScope
method to delete set scope.
hotkeys;
unbind
Similar to defining shortcuts, they can be unbound using hotkeys.unbind
.
// unbind 'a' handlerhotkeys; // unbind a hotkeys only for a single scope// when no scope is specified it defaults to the current scope (hotkeys.getScope())hotkeys;hotkeys;
Unbind events through functions.
{};hotkeys; ;hotkeys;
isPressed
Other key queries. For example, hotkeys.isPressed(77)
is true if the M
key is currently pressed.
;
getPressedKeyCodes
returns an array of key codes currently pressed.
filter
INPUT
SELECT
TEXTAREA
default does not handle.
Hotkeys.filter
to return to the true
shortcut keys set to play a role, flase
shortcut keys set up failure.
hotkeys{ return true;}//How to add the filter to edit labels. <div contentEditable="true"></div>//"contentEditable" Older browsers that do not support dropshotkeys { var tagName = eventtarget || eventsrcElementtagName; return !tagNameisContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA';} hotkeys{ var tagName = eventtarget || eventsrcElementtagName; hotkeys; return true;}
noConflict
Relinquish HotKeys’s control of the hotkeys
variable.
var k = hotkeys;; // -->Uncaught TypeError: hotkeys is not a function(anonymous function) // @ VM2170:2InjectedScript._evaluateOn // @ VM2165:883InjectedScript._evaluateAndWrap // @ VM2165:816InjectedScript.evaluate @ VM2165:682
Development
To develop, Install dependencies, Get the code:
$ git https://github.com/jaywcjlove/hotkeys.git$ cd hotkeys # Into the directory $ npm install # or yarn install
To develop, run the self-reloading build:
$ npm run watch
Run Document Website Environment.
$ npm run doc:dev
To contribute, please fork Hotkeys.js, add your patch and tests for it (in the test/
folder) and submit a pull request.
$ npm run test$ npm run test:watch # Development model