@ -1,12 +1,11 @@
# 设置快捷键
# Hotkeys
[](https://github.com/jaywcjlove/hotkeys/issues) [](https://github.com/jaywcjlove/hotkeys/network) [](https://github.com/jaywcjlove/hotkeys/stargazers) [](https://github.com/jaywcjlove/hotkeys/releases)
[](https://github.com/jaywcjlove/hotkeys/issues) [](https://github.com/jaywcjlove/hotkeys/network) [](https://github.com/jaywcjlove/hotkeys/stargazers) [](https://github.com/jaywcjlove/hotkeys/releases)  [](./README-zh.md)
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键，它没有依赖，压缩只有只有(~3kb)， ， ， ， ， ** 测试用例**， En ](http://jaywcjlove.github.io/hotkeys/?lang=en )
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 ](http://jaywcjlove.github.io/hotkeys ).
[](http://jaywcjlove.github.io/hotkeys/?lang=cn) [](http://jaywcjlove.github.io/hotkeys/?lang=en)
```text
```bash
__ __ __
| |--..-----.| |_ | |--..-----..--.--..-----.
| || _ || _ || < | -__|| | ||__ --|
@ -14,32 +13,35 @@
|_____|
```
## 创建
## Usage
您将需要在您的系统上安装的 Node.js。
You will need `Node.js` installed on your system.
```sh
# bower 安装
$ bower install hotkeysjs
```shell
$ npm install hotkeys-js --save
```
```js
import hotkeys from 'hotkeys-js';
```
# npm 安装
$ npm install hotkeys-js
Or manually download and link **hotkeys.js** in your HTML:
$ npm run build # 编译
$ npm run watch # 开发模式
```html
< script type = "text/javascript" src = "hotkeys.js" > < / script >
```
## React中使用
### Used in React
[react-hotkeys ](https://github.com/jaywcjlove/react-hotkeys )，安装如下：
[react-hotkeys ](https://github.com/jaywcjlove/react-hotkeys ) is the React component that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
```sh
npm i -S react-hot-keys
```shell
$ npm install react-hot-keys --save
```
例子
Detailed use method please see its documentation [react-hotkeys ](https://github.com/jaywcjlove/react-hotkeys ).
```js
```jsx
import React, { Component } from 'react';
import Hotkeys from 'react-hot-keys';
@ -50,179 +52,135 @@ export default class HotkeysDemo extends Component {
output: 'Hello, I am a component that listens to keydown and keyup of a',
}
}
onKeyUp(keyName, e, handle) {
console.log("test:onKeyUp", e, handle)
this.setState({
output: `onKeyUp ${keyName}` ,
});
onKeyUp(keyNm, e, handle) {
this.setState({output: keyNm})
}
onKeyDown(keyName, e, handle) {
console.log("test:onKeyDown", keyName, e, handle)
this.setState({
output: `onKeyDown ${keyName}` ,
});
this.setState({output: keyNm})
}
render() {
return (
< Hotkeys
keyName="shift+a,alt+s"
keyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
>
< div style = {{ padding: " 50px " } } >
{this.state.output}
< / div >
< div style = {{ padding: 50 } } > {this.state.output} < / div >
< / Hotkeys >
)
}
}
```
## 使用
## Browser Support
传统调用
Mousetrap has been tested and should work in.
```html
< script type = "text/javascript" src = "./js/hotkeys.js" > < / script >
```
包加载
```js
import hotkeys from 'hotkeys-js';
hotkeys('shift+a,alt+d, w', function(e){
console.log('干点活儿',e);
if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');
if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');
if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');
});
```shell
Internet Explorer 6+
Safari
Firefox
Chrome
```
## Defining Shortcuts
## 定义快捷键
One global method is exposed, key which defines shortcuts when called directly.
```js
// 定义 F5 快捷键
hotkeys('f5', function(event,handler){
//event.srcElement: input
//event.target: input
// 阻止Widnows系统下的默认刷新事件
hotkeys('f5', function(event, handler){
// Prevent the default refresh event under WIDNOWS system
event.preventDefault()
alert('你按下了 F5 键 !')
alert('you pressed F5!')
});
// 定义a快捷键
hotkeys('a', function(event,handler){
//event.srcElement: input
//event.target: input
if(event.target === "input"){
alert('你在输入框中按下了 a!')
alert('you pressed a!')
}
alert('你按下了 a!')
alert('you pressed a!')
});
// 定义a快捷键
hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
switch(handler.key){
case "ctrl+a":alert('你按下了 ctrl+a!');break;
case "ctrl+b":alert('你按下了 ctrl+b!');break;
case "r":alert('你按下了 r!');break;
case "f":alert('你按下了 f!');break;
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;
}
//handler.scope 范围
});
// 返回false将停止活动，
hotkeys('ctrl+r', function(){ alert('停止刷新!'); return false });
// 多个快捷方式做同样的事情
hotkeys('⌘+r, ctrl+r', function(){ });
// 对所有摁键执行任务
hotkeys('*','wcj', function(e){
console.log('干点活儿',e);
console.log("key.getScope()::",hotkeys.getScope());
if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');
if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');
if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');
console.log('do something',e);
});
```
## 支持的键
`⇧` , `shift` , `option` , `⌥` , `alt` , `ctrl` , `control` , `command` , `⌘`
## API REFERENCE
`⌘` Command()
`⌃` Control
`⌥` Option(alt)
`⇧` Shift
`⇪` Caps Lock(大写)
~~`fn` 功能键就是fn(不支持)~~
`↩︎` return/enter
`space` 空格键
Asterisk "*"
## 修饰键判断
可以对下面的修饰键判断 `shift` `alt` `option` `ctrl` `control` `command` ，特别注意`+`和`=`键值相同，组合键设置`⌘+=`
Modifier key judgments
```js
hotkeys('shift+a,alt+d, w', function(e){
console.log('干点活儿',e);
if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');
if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');
if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');
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! ');
});
```
## 切换快捷键
### setScope
如果在单页面在不同的区域， ， ， ！
Use the `hotkeys.setScope` method to set scope.
```js
// 一个快捷键，有可能干的活儿不一样哦
hotkeys('ctrl+o, ctrl+alt+enter', 'scope1 ', function(){
console.log('你好看 ');
// define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter', 'issues ', function(){
console.log('do something ');
});
hotkeys('ctrl+o, enter', 'scope2', function(){
console.log('你好丑陋啊！');
hotkeys('o, enter', 'files', function(){
console.log('do something else');
});
// 你摁 “ctrl+o”组合键
// 当scope等于 scope1 ，执行 回调事件打印出 “你好看”，
// 当scope等于 scope2 ，执行 回调事件打印出 “你好丑陋啊！”，
// 通过setScope设定范围scope
hotkeys.setScope('scope1'); // 默认所有事儿都干哦
// set the scope (only 'all' and 'issues' shortcuts will be honored)
hotkeys.setScope('issues'); // default scope is 'all'
```
## 标记快捷键范围
### getScope
**删除** 区域范围标记
Use the `hotkeys.getScope` method to get scope.
```js
hotkeys.deleteScope('scope1' );
hotkeys.getScope( );
```
**获取** 区域范围标记
### deleteScope
Use the `hotkeys.deleteScope` method to delete set scope.
```js
hotkeys.getScope( );
hotkeys.deleteScope('issues' );
```
**设置** 区域范围标记
### unbind
```js
hotkeys.setScope('scope1');
```
Similar to defining shortcuts, they can be unbound using `hotkeys.unbind` .
## 解除绑定
```js
// unbind 'a' handler
hotkeys.unbind('a');
`hotkeys.unbind("ctrl+o, ctrl+alt+enter")` 解除绑定两组快捷键
`hotkeys.unbind("ctrl+o","files")` 解除绑定名字叫files钟的一组快捷键
// 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');
```
## 键判断
### isPressed
判断摁下的键是否为某个键
Other key queries. For example, `hotkeys.isPressed(77)` is true if the `M` key is currently pressed.
```js
hotkeys('a', function(){
@ -232,36 +190,32 @@ hotkeys('a', function(){
});
```
## 获取摁下键值
### getPressedKeyCodes
获取摁下绑定键的键值 `hotkeys.getPressedKeyCodes()`
returns an array of key codes currently pressed.
```js
hotkeys('command+ctrl+shift+a,f', function(){
console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70]
console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] or [70]
})
```
## 过滤
### filter
`INPUT` `SELECT` `TEXTAREA` 默认不处理。
` hotkeys.filter` 返回 `true` 快捷键设置才会起作用，`false` 快捷键设置失效。
`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.
```java script
```js
hotkeys.filter = function(event){
return true;
}
// 如何增加过滤可编辑标签 < div contentEditable = "true" > < / div >
// contentEditable老浏览器不支持滴
//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');
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');
@ -269,17 +223,67 @@ hotkeys.filter = function(event){
}
```
## 兼容模式
### noConflict
Relinquish HotKeys’ `hotkeys` variable.
```js
var k = hotkeys.noConflict();
k('a', function() {
console.log("这里可以干一些事儿 ")
console.log("do something ")
});
hotkeys()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// @ VM2165:816InjectedScript.evaluate @ VM2165:682
```
## 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
## Development
To develop, run the self-reloading build, Get the code:
```shell
$ git https://github.com/jaywcjlove/hotkeys.git
$ cd hotkeys # Into the directory
$ npm install # or yarn install
```
To develop, run the self-reloading build:
```shell
$ npm run watch
```
Run Document Website Environment.
```shell
$ 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.
```shell
$ npm run test
$ npm run test:watch # Development model
```
## License
[MIT © Kenny Wong ](./LICENSE )
jaywcjlove
7 years ago