<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > hotkeys.js - A robust Javascript library for capturing keyboard input.< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< meta name = "description" content = "A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight." >
< link rel = "stylesheet" type = "text/css" href = "src/style.css" >
< link rel = "stylesheet" href = "//cdn.jsdelivr.net/highlight.js/8.8.0/styles/default.min.css" >
< / head >
< body >
< div class = "header" >
< a href = "https://github.com/jaywcjlove/hotkeys" target = "_blank" class = "github-corner" > < svg viewBox = "0 0 250 250" > < path d = "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" > < / path > < path d = "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill = "currentColor" style = "transform-origin: 130px 106px;" class = "octo-arm" > < / path > < path d = "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill = "currentColor" class = "octo-body" > < / path > < / svg > < / a >
< div class = "title" > HotKeys< / div >
< div class = "lang" > < a href = "javascript:tran.setLang('default');" > English< / a > < a href = "javascript:tran.setLang('cn');" > 中文< / a > < / div >
< div class = "github_wrapper" >
< a href = "https://github.com/jaywcjlove/hotkeys/zipball/master" >
< button class = "github_style" > Download as zip <!-- {cn}zip 下载 --> < / button >
< / a >
< a href = "https://github.com/jaywcjlove/hotkeys/tarball/master" >
< button class = "github_style" > Download as tar.gz <!-- {cn}tar.gz 下载 --> < / button >
< / a >
< a href = "https://github.com/jaywcjlove/hotkeys/" >
< button class = "github_style" > Fork on Github <!-- {cn}复制代码到Github仓库 --> < / button >
< / a >
< a href = "https://github.com/jaywcjlove/hotkeys/" >
< button class = "github_style" > Doc on Github <!-- {cn}文档在Github上 --> < / button >
< / a >
< / div >
< div class = "info" > A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.
<!-- {cn}捕获键盘输入和输入组合键， ， -->
< / div >
< / div >
< div class = "board" >
< div class = "keyboard" id = "keyboard" >
< ul >
< li data-keycode = "27" > esc< / li >
< li data-keycode = "112" > F1< / li >
< li data-keycode = "113" > F2< / li >
< li data-keycode = "114" > F3< / li >
< li data-keycode = "115" > F4< / li >
< li data-keycode = "116" > F5< / li >
< li data-keycode = "117" > F6< / li >
< li data-keycode = "118" > F7< / li >
< li data-keycode = "119" > F8< / li >
< li data-keycode = "120" > F9< / li >
< li data-keycode = "121" > F10< / li >
< li data-keycode = "122" > F11< / li >
< li data-keycode = "123" > F12< / li >
< li data-keycode = "-1" > 〇 < / li >
< li data-keycode = "192" > < span > ~< / span > < span > `< / span > < / li >
< li data-keycode = "49" > < span > !< / span > < span > 1< / span > < / li >
< li data-keycode = "50" > < span > @< / span > < span > 2< / span > < / li >
< li data-keycode = "51" > < span > #< / span > < span > 3< / span > < / li >
< li data-keycode = "52" > < span > $< / span > < span > 4< / span > < / li >
< li data-keycode = "53" > < span > %< / span > < span > 5< / span > < / li >
< li data-keycode = "54" > < span > ^< / span > < span > 6< / span > < / li >
< li data-keycode = "55" > < span > & < / span > < span > 7< / span > < / li >
< li data-keycode = "56" > < span > *< / span > < span > 8< / span > < / li >
< li data-keycode = "57" > < span > (< / span > < span > 9< / span > < / li >
< li data-keycode = "48" > < span > )< / span > < span > 0< / span > < / li >
< li data-keycode = "189" > < span > ＿ < / span > < span > -< / span > < / li >
< li data-keycode = "187" > < span > ＋ < / span > < span > =< / span > < / li >
< li data-keycode = "8" > < span > delete< / span > < / li >
< li data-keycode = "9" > < span > tab< / span > < / li >
< li data-keycode = "81" > Q< / li >
< li data-keycode = "87" > W< / li >
< li data-keycode = "69" > E< / li >
< li data-keycode = "82" > R< / li >
< li data-keycode = "84" > T< / li >
< li data-keycode = "89" > Y< / li >
< li data-keycode = "85" > U< / li >
< li data-keycode = "73" > I< / li >
< li data-keycode = "79" > O< / li >
< li data-keycode = "80" > P< / li >
< li data-keycode = "219" > < span > {< / span > < span > [< / span > < / li >
< li data-keycode = "221" > < span > }< / span > < span > ]< / span > < / li >
< li data-keycode = "220" > < span > |< / span > < span > \< / span > < / li >
< li data-keycode = "20" > < i > < / i > < span > CapsLock< / span > < / li >
< li data-keycode = "65" > A< / li >
< li data-keycode = "83" > S< / li >
< li data-keycode = "68" > D< / li >
< li data-keycode = "70" > F< / li >
< li data-keycode = "71" > G< / li >
< li data-keycode = "72" > H< / li >
< li data-keycode = "74" > J< / li >
< li data-keycode = "75" > K< / li >
< li data-keycode = "76" > L< / li >
< li data-keycode = "186" > < span > :< / span > < span > ;< / span > < / li >
< li data-keycode = "222" > < span > "< / span > < span > '< / span > < / li >
< li data-keycode = "13" > < i > enter< / i > < span > return< / span > < / li >
< li data-keycode = "16" > < span > shift< / span > < / li >
< li data-keycode = "90" > Z< / li >
< li data-keycode = "88" > X< / li >
< li data-keycode = "67" > C< / li >
< li data-keycode = "86" > V< / li >
< li data-keycode = "66" > B< / li >
< li data-keycode = "78" > N< / li >
< li data-keycode = "77" > M< / li >
< li data-keycode = "188" > < span > < < / span > < span > ,< / span > < / li >
< li data-keycode = "190" > < span > > < / span > < span > .< / span > < / li >
< li data-keycode = "191" > < span > ?< / span > < span > /< / span > < / li >
< li data-keycode = "16" > < span > shift< / span > < / li >
< li data-keycode = "-1" > < span > fn< / span > < / li >
< li data-keycode = "17" > < span > control< / span > < / li >
< li data-keycode = "18" > < i > alt< / i > < span > option< / span > < / li >
< li data-keycode = "91" > < span > command< / span > < / li >
< li data-keycode = "32" > < / li >
< li data-keycode = "93" > < span > command< / span > < / li >
< li data-keycode = "18" > < i > alt< / i > < span > option< / span > < / li >
< li data-keycode = "37" > ◀< / li >
< li data-keycode = "38" > ▲< / li >
< li data-keycode = "39" > ▶< / li >
< li data-keycode = "40" > ▼< / li >
< / ul >
< / div >
< / div >
< div class = "warpper" >
< div class = "key_info" id = "key_info" > < / div >
< br / >
< p > HotKeys is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks.<!-- {cn}HotKeys有一些特别的功能， ， ， ， --> < / p >
< h1 > USAGE<!-- {cn}用法 --> < / h1 >
< p > Include hotkeys.js in your web app.<!-- {cn}在您的web应用中引用hotkeys.js --> < / p >
< pre > < code class = "html" >
< script type=" text/javascript" src=" hotkeys.js" > < /script>
< / code > < / pre >
< h2 > Browser Support<!-- {cn}浏览器支持 --> < / h2 >
< p > Mousetrap has been tested and should work in<!-- {cn}捕获器进行了测试，应该在这些浏览器中工作 --> < / p >
< pre > < code class = "sh" >
Internet Explorer 6+
Safari
Firefox
Chrome
< / code > < / pre >
< h1 > Building<!-- {cn}构建 --> < / h1 >
< p > You will need Node.js installed on your system. you can run gulp directly:
<!-- {cn}您需要在系统上安装Node.js的。您可以直接运行 Gulp ： --> < / p >
< pre >
< code class = "sh" >
# bower install
$ bower install hotkeysjs
# npm install
$ npm install hotkeys-js
$ gulp build & & gulp min & & gulp map
# The resulting files are:
# dist/hotkeys.js
# dist/hotkeys.min.js
# dist/hotkeys.min.map
< / code > < / pre >
< h1 > DEFINING SHORTCUTS<!-- {cn}定义快捷键 --> < / h1 >
< p > One global method is exposed, key which defines shortcuts when called directly.<!-- {cn}一个全局的方法暴露出来，关键的时候直接调用定义的快捷键。 --> < / p >
< pre >
< code class = "js" >
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);
});
< / code > < / pre >
< h1 > API REFERENCE<!-- {cn}API参考 --> < / h1 >
< h2 > Asterisk "*"< / h2 >
< p > Modifier key judgments<!-- {cn}修改关键判断 --> < / p >
< pre >
< code class = "js" >
hotkeys('*','wcj', function(e){
if(hotkeys.shift) console.log('shift is pressed！
if(hotkeys.ctrl) console.log('shift is pressed! ');
if(hotkeys.alt) console.log('shift is pressed! ');
});
< / code > < / pre >
< h2 > setScope< / h2 >
< p > Use the <!-- {cn}使用 --> < code > hotkeys.setScope< / code > method to set scope.<!-- {cn}设定范围。 --> < / p >
< pre >
< code class = "js" >
// 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'
< / code > < / pre >
< h2 > deleteScope< / h2 >
< p > Use the <!-- {cn}使用 --> < code > hotkeys.deleteScope< / code > method to delete set scope.<!-- {cn}删除设定范围。 --> < / p >
< pre >
< code class = "js" >
hotkeys.deleteScope('issues');
< / code > < / pre >
< h2 > unbind< / h2 >
< p > Similar to defining shortcuts, they can be unbound using <!-- {cn}定义的快捷键，解除绑定可以使用它 --> < code > hotkeys.unbind< / code > .< / p >
< pre >
< code class = "js" >
// 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');
< / code > < / pre >
< h2 > isPressed< / h2 >
< p > Other key queries. For example, <!-- {cn}查询其它键。例如， --> < code > hotkeys.isPressed(77)< / code > is true if the <!-- {cn}如果是真 --> < code > M< / code > key is currently pressed.<!-- {cn}当前按下的键。 --> < / p >
< pre >
< code class = "js" >
hotkeys('a', function(){
console.log(hotkeys.isPressed("A")); //=> true
console.log(hotkeys.isPressed(65)); //=> true
});
< / code > < / pre >
< h2 > getPressedKeyCodes< / h2 >
< p > returns an array of key codes currently pressed.<!-- {cn}返回当前按下的键盘码。 --> < / p >
< pre >
< code class = "js" >
hotkeys('command+ctrl+shift+a', function(){
console.log(hotkeys.getPressedKeyCodes()); //=> [67, 16, 17, 91, 65]
})
< / code > < / pre >
< h2 > filter<!-- {cn}filter过滤 --> < / h2 >
< p >
< code > INPUT< / code > < code > SELECT< / code > < code > TEXTAREA< / code > default does not handle.<!-- {cn}默认不处理他们。 --> < br / >
< code > Hotkeys.filter< / code > to return to the <!-- {cn}它返回 --> < code > true< / code > shortcut keys set to play a role<!-- {cn}设置热键发挥起作用 --> , < code > flase< / code > shortcut keys set up failure.<!-- {cn}设置热键不起作用。 -->
< / p >
< pre >
< code class = "js" >
hotkeys.filter = function(event){
return true;
}
//How to add the filter to edit labels. < div contentEditable=" true" > < /div>
//"contentEditable" Older browsers that do not support drops
hotkeys.filter = function(event) {
var tagName = (event.target || event.srcElement).tagName;
return !(tagName.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
}
hotkeys.filter = function(event){
var tagName = (event.target || event.srcElement).tagName;
hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
return true;
}
< / code > < / pre >
< h2 > noConflict< / h2 >
< p > Relinquish HotKeys’ <!-- {cn}放弃在 --> < code > hotkeys< / code > variable.<!-- {cn}的全局变量 --> < / p >
< pre >
< code class = "js" >
var k = 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
< / code > < / pre >
< h1 > SUPPORTED KEYS<!-- {cn}支持的热键 --> < / h1 >
< p > HotKeys understands the following modifiers:<!-- {cn}热键支持的修饰键： -->
< code > ⇧< / code > , < code > shift< / code > , < code > option< / code > , < code > ⌥< / code > , < code > alt< / code > , < code > ctrl< / code > , < code > control< / code > , < code > command< / code > , and < code > ⌘< / code > .< / p >
< p > The following special keys can be used for shortcuts:<!-- {cn}下面的特殊键，可用于快捷键： -->
< code > backspace< / code > , < code > tab< / code > , < code > clear< / code > , < code > enter< / code > , < code > return< / code > , < code > esc< / code > , < code > escape< / code > , < code > space< / code > ,
< code > up< / code > , < code > down< / code > , < code > left< / code > , < code > right< / code > , < code > home< / code > , < code > end< / code > , < code > pageup< / code > , < code > pagedown< / code > , < code > del< / code > , < code > delete< / code >
and <!-- {cn}和 --> < code > f1< / code > through <!-- {cn}~ --> < code > f19< / code > .<!-- {cn}。 --> < / p >
< p >
< code > ⌘< / code > Command()< br / >
< code > ⌃< / code > Control< br / >
< code > ⌥< / code > Option(alt)< br / >
< code > ⇧< / code > Shift< br / >
< code > ⇪< / code > Caps Lock(Capital)< br / >
< code > fn< / code > Does not support fn< br / >
< code > ↩︎< / code > return/Enter space < br / >
< / p >
< div class = "github_shields" >
< a href = "https://github.com/jaywcjlove/hotkeys/network" target = "_blank" rel = "external" > < img src = "https://img.shields.io/github/forks/jaywcjlove/hotkeys.svg?style=social" alt = "" > < / a > < a href = "https://github.com/jaywcjlove/hotkeys/stargazers" target = "_blank" rel = "external" > < img src = "https://img.shields.io/github/stars/jaywcjlove/hotkeys.svg?style=social" alt = "" > < / a > < a href = "https://github.com/jaywcjlove/hotkeys/watchers" target = "_blank" rel = "external" > < img src = "https://img.shields.io/github/watchers/jaywcjlove/hotkeys.svg?style=social&label=Watch" alt = "" > < / a > < a href = "https://github.com/jaywcjlove/followers" target = "_blank" rel = "external" > < img src = "https://img.shields.io/github/followers/jaywcjlove.svg?style=social" alt = "" > < / a >
< / div >
< div class = "kennywang" > © < a target = "_blank" href = "http://jaywcjlove.github.io" > kenny.wang< / a > 2015< / div >
< / div >
< script type = "text/javascript" src = "//unpkg.com/translater.js@1.0.9/dist/translater.min.js?198711" > < / script >
< script type = "text/javascript" src = "//unpkg.com/hotkeys-js@2.0.8/dist/hotkeys.min.js?198711" > < / script >
< script type = "text/javascript" src = "src/main.js" > < / script >
< script src = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js" > < / script >
< script > hljs . initHighlightingOnLoad ( ) ; < / script >
< / body >
< / html >
