Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork419
➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
License
jaywcjlove/hotkeys-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~6kB) (gzipped:2.8kB), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks. Official documentdemo preview.More examples.
╭┈┈╮ ╭┈┈╮ ╭┈┈╮┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.┆ ┆┆ □ ┆┆ ┈┤┆< ┆ -__┘┆ ┆ ┆┆__ ┈┈┤╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯ ╰┈┈┈┈┈╯You will needNode.js installed on your system.
npm install hotkeys-js --save
importhotkeysfrom'hotkeys-js';hotkeys('f5',function(event,handler){// Prevent the default refresh event under WINDOWS systemevent.preventDefault()alert('you pressed F5!')});
Or manually download and linkhotkeys.js in your HTML, It can also be downloaded viaUNPKG:
CDN:UNPKG |jsDelivr |Githack |Statically |bundle.run
<scriptsrc="https://unpkg.com/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;default:alert(event);}});</script>
react-hotkeys is the React component that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Detailed use method please see its documentationreact-hotkeys.
react-hotkeys-hook - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.
Hotkeys.js has been tested and should work in.
Internet Explorer 6+SafariFirefoxChrome
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, f1 through f19, num_0 through num_9, num_multiply, num_add, num_enter, num_subtract, num_decimal, num_divide.
⌘ Command()⌃ Control⌥ Option(alt)⇧ Shift⇪ Caps Lock(Capital)fn Does 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 systemevent.preventDefault();alert('you pressed F5!');});// Returning false stops the event and prevents default browser events// Mac OS system defines `command + r` as a refresh shortcuthotkeys('ctrl+r, command+r',function(){alert('stopped reload!');returnfalse;});// Single keyhotkeys('a',function(event,handler){//event.srcElement: input//event.target: inputif(event.target==="input"){alert('you pressed a!')}alert('you pressed a!')});// Key Combinationhotkeys('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;default:alert(event);}});hotkeys('ctrl+a+s',function(){alert('you pressed ctrl+a+s!');});// Using a scopehotkeys('*','wcj',function(event){console.log('do something',event);});
scope<String>: Sets the scope in which the shortcut key is activeelement<HTMLElement>: Specifies the DOM element to bind the event tokeyup<Boolean>: Whether to trigger the shortcut on key releasekeydown<Boolean>: Whether to trigger the shortcut on key presssplitKey<String>: Delimiter for key combinations (default is+)capture<Boolean>: Whether to trigger the listener during the capture phase (before the event bubbles down)single<Boolean>: Allows only one callback function (automatically unbinds previous one)
hotkeys('o, enter',{scope:'wcj',element:document.getElementById('wrapper'),},function(){console.log('do something else');});hotkeys('ctrl-+',{splitKey:'-'},function(e){console.log('you pressed ctrl and +');});hotkeys('+',{splitKey:'-'},function(e){console.log('you pressed +');})
keyup
key down andkey up both perform callback events.
hotkeys('ctrl+a,alt+a+s',{keyup:true},function(event,handler){if(event.type==='keydown'){console.log('keydown:',event.type,handler,handler.key);}if(event.type==='keyup'){console.log('keyup:',event.type,handler,handler.key);}});
Asterisk "*"
Modifier key judgments
hotkeys('*',function(){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.setScope method to set scope. There can only be one active scope besides 'all'. By default 'all' is always active.
// Define shortcuts with a scopehotkeys('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.getScope method to get scope.
hotkeys.getScope();
Use thehotkeys.deleteScope method to delete a scope. This will also remove all associated hotkeys with it.
hotkeys.deleteScope('issues');
You can use second argument, if need set new scope after deleting.
hotkeys.deleteScope('issues','newScopeName');
Similar to defining shortcuts, they can be unbound usinghotkeys.unbind.
// unbind 'a' handlerhotkeys.unbind('a');// Unbind a hotkeys only for a single scope// If 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);}
To unbind everything.
hotkeys.unbind();
For example,hotkeys.isPressed(77) is true if theM key is currently pressed.
hotkeys('a',function(){console.log(hotkeys.isPressed('a'));//=> trueconsole.log(hotkeys.isPressed('A'));//=> trueconsole.log(hotkeys.isPressed(65));//=> true});
trigger shortcut key event
hotkeys.trigger('ctrl+o');hotkeys.trigger('ctrl+o','scope2');
Returns an array of key codes currently pressed.
hotkeys('command+ctrl+shift+a,f',function(){console.log(hotkeys.getPressedKeyCodes());//=> [17, 65] or [70]})
Returns an array of key codes currently pressed.
hotkeys('command+ctrl+shift+a,f',function(){console.log(hotkeys.getPressedKeyString());//=> ['⌘', '⌃', '⇧', 'A', 'F']})
Get a list of all registration codes.
hotkeys('command+ctrl+shift+a,f',function(){console.log(hotkeys.getAllKeyCodes());// [// { scope: 'all', shortcut: 'command+ctrl+shift+a', mods: [91, 17, 16], keys: [91, 17, 16, 65] },// { scope: 'all', shortcut: 'f', mods: [], keys: [42] }// ]})
By default hotkeys are not enabled forINPUTSELECTTEXTAREA elements.Hotkeys.filter to return to thetrue shortcut keys set to play a role,false shortcut 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 dropshotkeys.filter=function(event){vartarget=event.target||event.srcElement;vartagName=target.tagName;return!(target.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 thehotkeys variable.
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:682
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
To 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
As always, thanks to our amazing contributors!
Made withgithub-action-contributors.
About
➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
