What is hotkeys-js?
The hotkeys-js npm package is a simple library for handling keyboard shortcuts in web applications. It allows developers to define and manage keyboard shortcuts with ease, providing a straightforward API for binding and unbinding keys.
What are hotkeys-js's main functionalities?
Binding a single key
This feature allows you to bind a single key to a function. In this example, pressing the 'A' key will trigger a console log message.
hotkeys('a', function(event, handler) {
console.log('You pressed A!');
});
Binding multiple keys
This feature allows you to bind multiple keys to a single function. In this example, pressing either 'Ctrl+A' or 'Ctrl+B' will trigger the same console log message.
hotkeys('ctrl+a, ctrl+b', function(event, handler) {
console.log('You pressed either Ctrl+A or Ctrl+B!');
});
Binding key combinations
This feature allows you to bind key combinations to a function. In this example, pressing 'Ctrl+Shift+K' will trigger a console log message.
hotkeys('ctrl+shift+k', function(event, handler) {
console.log('You pressed Ctrl+Shift+K!');
});
Unbinding keys
This feature allows you to unbind a previously bound key. In this example, the 'A' key will no longer trigger any function.
hotkeys.unbind('a');
Filtering key events
This feature allows you to filter which key events should be processed by hotkeys-js. In this example, all key events will be processed.
hotkeys.filter = function(event) {
return true; // Process all key events
};
Other packages similar to hotkeys-js
mousetrap
Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is similar to hotkeys-js in that it allows you to bind and unbind keys and key combinations. However, Mousetrap has a slightly different API and includes additional features such as sequence bindings and key event handling in specific DOM elements.
keymaster
Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts. It is similar to hotkeys-js in its simplicity and ease of use. Keymaster focuses on providing a minimalistic API for binding keys and key combinations, but it does not include some of the more advanced features found in hotkeys-js, such as filtering key events.
keyboardjs
KeyboardJS is a robust library for handling keyboard input. It offers more advanced features compared to hotkeys-js, such as support for key sequences, key states, and context-specific bindings. While it is more feature-rich, it also has a steeper learning curve compared to the simplicity of hotkeys-js.
设置快捷键
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。hotkey
可以算是临摹参考madrobby/keymaster的作品,重写了一遍,修复多个兼容问题,键支持,添加UMD支持和 测试用例,官方文档DEMO预览 En
__ __ __
| |--..-----.| |_ | |--..-----..--.--..-----.
| || _ || _|| < | -__|| | ||__ --|
|__|__||_____||____||__|__||_____||___ ||_____|
|_____|
创建
您将需要在您的系统上安装的 Node.js。
$ bower install hotkeysjs
$ npm install hotkeys-js
$ npm run build
$ npm run watch
React中使用
react-hotkeys,安装如下:
npm i -S react-hot-keys
例子
import React, { Component } from 'react';
import Hotkeys from 'react-hot-keys';
export default class HotkeysDemo extends Component {
constructor(props) {
super(props);
this.state = {
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}`,
});
}
onKeyDown(keyName, e, handle) {
console.log("test:onKeyDown", keyName, e, handle)
this.setState({
output: `onKeyDown ${keyName}`,
});
}
render() {
return (
<Hotkeys
keyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
>
<div style={{ padding: "50px" }}>
{this.state.output}
</div>
</Hotkeys>
)
}
}
使用
传统调用
<script type="text/javascript" src="./js/hotkeys.js"></script>
包加载
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 键!');
});
定义快捷键
hotkeys('a', function(event,handler){
if(event.target === "input"){
alert('你在输入框中按下了 a!')
}
alert('你按下了 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;
}
});
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 键!');
});
支持的键
⇧
, shift
, option
, ⌥
, alt
, ctrl
, control
, command
, ⌘
⌘
Command()
⌃
Control
⌥
Option(alt)
⇧
Shift
⇪
Caps Lock(大写)
fn
功能键就是fn(不支持)
↩︎
return/enter
space
空格键
修饰键判断
可以对下面的修饰键判断 shift
alt
option
ctrl
control
command
,特别注意+
和=
键值相同,组合键设置⌘+=
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 键!');
});
切换快捷键
如果在单页面在不同的区域,相同的快捷键,干不同的事儿,之间来回切换。O(∩_∩)O !
hotkeys('ctrl+o, ctrl+alt+enter', 'scope1', function(){
console.log('你好看');
});
hotkeys('ctrl+o, enter', 'scope2', function(){
console.log('你好丑陋啊!');
});
hotkeys.setScope('scope1');
标记快捷键范围
删除 区域范围标记
hotkeys.deleteScope('scope1');
获取 区域范围标记
hotkeys.getScope('scope1');
设置 区域范围标记
hotkeys.setScope('scope1');
解除绑定
hotkeys.unbind("ctrl+o, ctrl+alt+enter")
解除绑定两组快捷键
hotkeys.unbind("ctrl+o","files")
解除绑定名字叫files钟的一组快捷键
键判断
判断摁下的键是否为某个键
hotkeys('a', function(){
console.log(hotkeys.isPressed("a"));
console.log(hotkeys.isPressed("A"));
console.log(hotkeys.isPressed(65));
});
获取摁下键值
获取摁下绑定键的键值 hotkeys.getPressedKeyCodes()
hotkeys('command+ctrl+shift+a,f', function(){
console.log(hotkeys.getPressedKeyCodes());
})
过滤
INPUT
SELECT
TEXTAREA
默认不处理。
hotkeys.filter
返回 true
快捷键设置才会起作用,false
快捷键设置失效。
hotkeys.filter = function(event){
return true;
}
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;
}
兼容模式
var k = hotkeys.noConflict();
k('a', function() {
console.log("这里可以干一些事儿")
});
hotkeys()