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 documentdemo preview.
╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆<┆ -__┘┆ ┆ ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯
╰┈┈┈┈┈╯You will needNode.jsinstalled on your system.
$ npm install hotkeys-js --saveimporthotkeysfrom'hotkeys-js';
hotkeys('f5',function(event,handler){
// Prevent the default refresh event under WINDOWS system
event.preventDefault()
alert('you pressed F5!')
});Or manually download and linkhotkeys.jsin your HTML, It can also be downloaded viaUNPKG:
<scriptsrc= "https://unpkg /hotkeys-js/dist/hotkeys.min.js"></script>
<scripttype= "text/javascript">
hotkeys('ctrl+a,ctrl+b,r,f',function(event,handler){
switch(handler.key){
case"ctrl+a":alert('you pressed ctrl+a!');break;
case"ctrl+b":alert('you pressed ctrl+b!');break;
case"r":alert('you pressed r!');break;
case"f":alert('you pressed f!');break;
}
});
</script>react-hotkeysis the React component that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
$ npm install react-hot-keys --saveDetailed use method please see its documentationreact-hotkeys.
importReact,{Component}from'react';
importHotkeysfrom'react-hot-keys';
exportdefaultclassHotkeysDemoextendsComponent{
constructor(props){
super(props);
this.state={
output:'Hello, I am a component that listens to keydown and keyup of a',
}
}
onKeyUp(keyNm,e,handle){
this.setState({output:keyNm})
}
onKeyDown(keyName,e,handle){
this.setState({output:keyNm})
}
render(){
return(
<Hotkeys
keyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
>
<divstyle={{padding:50}}>{this.state.output}</div>
</Hotkeys>
)
}
}Hotkeys.js has been tested and should work in.
Internet Explorer 6+
Safari
Firefox
ChromeHotKeys 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)
fnDoes not support fn
↩︎return/Enter space
One global method is exposed, key which defines shortcuts when called directly.
hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>])
hotkeys('f5',function(event,handler){
// Prevent the default refresh event under WINDOWS system
event.preventDefault();
alert('you pressed F5!');
});
// Returning false stops the event and prevents default browser events
// Mac OS system defines `command + r` as a refresh shortcut
hotkeys('ctrl+r, command+r',function(){
alert('stopped reload!');
returnfalse;
});
hotkeys('a',function(event,handler){
//event.srcElement: input
//event.target: input
if(event.target==="input"){
alert('you pressed a!')
}
alert('you pressed a!')
});
hotkeys('ctrl+a,ctrl+b,r,f',function(event,handler){
switch(handler.key){
case"ctrl+a":alert('you pressed ctrl+a!');break;
case"ctrl+b":alert('you pressed ctrl+b!');break;
case"r":alert('you pressed r!');break;
case"f":alert('you pressed f!');break;
}
});
hotkeys('*','wcj',function(e){
console.log('do something',e);
});scope<String>element<HTMLElement>
hotkeys('o, enter',{
scope:'wcj',
element:document.getElementById('warpper'),
},function(){
console.log('do something else');
});Asterisk "*"
Modifier key judgments
hotkeys('*',function(e){
if(hotkeys.shift)console.log('shift is pressed!');
if(hotkeys.ctrl)console.log('ctrl is pressed!');
if(hotkeys.alt)console.log('alt is pressed!');
if(hotkeys.option)console.log('option is pressed!');
if(hotkeys.control)console.log('control is pressed!');
if(hotkeys.cmd)console.log('cmd is pressed!');
if(hotkeys.command)console.log('command is pressed!');
});Use thehotkeys.setScopemethod to set scope.
// define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter','issues',function(){
console.log('do something');
});
hotkeys('o, enter','files',function(){
console.log('do something else');
});
// set the scope (only 'all' and 'issues' shortcuts will be honored)
hotkeys.setScope('issues');// default scope is 'all'Use thehotkeys.getScopemethod to get scope.
hotkeys.getScope();Use thehotkeys.deleteScopemethod to delete set scope.
hotkeys.deleteScope('issues');Similar to defining shortcuts, they can be unbound usinghotkeys.unbind.
// unbind 'a' handler
hotkeys.unbind('a');
// unbind a hotkeys only for a single scope
// when no scope is specified it defaults to the current scope (hotkeys.getScope())
hotkeys.unbind('o, enter','issues');
hotkeys.unbind('o, enter','files');Unbind events through functions.
functionexample(){}
hotkeys('a',example);
hotkeys.unbind('a',example);
hotkeys('a','issues',example);
hotkeys.unbind('a','issues',example);Other key queries. For example,hotkeys.isPressed(77)is true if theMkey is currently pressed.
hotkeys('a',function(){
console.log(hotkeys.isPressed("a"));//=> true
console.log(hotkeys.isPressed("A"));//=> true
console.log(hotkeys.isPressed(65));//=> true
});returns an array of key codes currently pressed.
hotkeys('command+ctrl+shift+a,f',function(){
console.log(hotkeys.getPressedKeyCodes());//=> [17, 65] or [70]
})INPUTSELECTTEXTAREAdefault does not handle.
Hotkeys.filterto return to thetrueshortcut keys set to play a role,flaseshortcut keys set up failure.
hotkeys.filter=function(event){
returntrue;
}
//How to add the filter to edit labels. <div contentEditable= "true" ></div>
// "contentEditable" Older browsers that do not support drops
hotkeys.filter=function(event){
vartagName=(event.target||event.srcElement).tagName;
return!(tagName.isContentEditable||tagName=='INPUT'||tagName=='SELECT'||tagName=='TEXTAREA');
}
hotkeys.filter=function(event){
vartagName=(event.target||event.srcElement).tagName;
hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName)?'input':'other');
returntrue;
}Relinquish HotKeys’s control of thehotkeysvariable.
vark=hotkeys.noConflict();
k('a',function(){
console.log("do something")
});
hotkeys()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// @ VM2165:816InjectedScript.evaluate @ VM2165:682To develop, Install dependencies, Get the code:
$ git https://github /jaywcjlove/hotkeys.git
$cdhotkeys#Into the directory
$ npm install#or yarn installTo develop, run the self-reloading build:
$ npm run watchRun Document Website Environment.
$ npm run doc:devTo contribute, please fork Hotkeys.js, add your patch and tests for it (in thetest/folder) and submit a pull request.
$ npm runtest
$ npm run test:watch#Development model