这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。
更新内容:
- 添加测试用例;
- 添加更多特殊键支持;
- 修复bug。
__ __ __
| |--..-----.| |_ | |--..-----..--.--..-----.
| || _ || _|| < | -__|| | ||__ --|
|__|__||_____||____||__|__||_____||___ ||_____|
|_____|
创建
您将需要在您的系统上安装的 Node.js。
# bower 安装
$ bower install hotkeysjs
# npm 安装
$ 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 键!');
});
定义快捷键
// 定义a快捷键
hotkeys('a', function(event,handler){
//event.srcElement: input
//event.target: input
if(event.target === "input"){
alert('你在输入框中按下了 a!')
}
alert('你按下了 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;
}
//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 键!');
});
支持的键
⇧
, shift
, option
, ⌥
, alt
, ctrl
, control
, command
, ⌘
。
⌘
Command()⌃
Control⌥
Option(alt)⇧
Shift⇪
Caps Lock(大写)fn
功能键就是fn(不支持)↩︎
return/enterspace
空格键
修饰键判断
可以对下面的修饰键判断 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('你好丑陋啊!');
});
// 你摁 “ctrl+o”组合键
// 当scope等于 scope1 ,执行 回调事件打印出 “你好看”,
// 当scope等于 scope2 ,执行 回调事件打印出 “你好丑陋啊!”,
// 通过setScope设定范围scope
hotkeys.setScope('scope1'); // 默认所有事儿都干哦
删除标记快捷键
删除区域范围标记
hotkeys.deleteScope('issues');
解除绑定
hotkeys.unbind("ctrl+o, ctrl+alt+enter")
解除绑定两组快捷键hotkeys.unbind("ctrl+o","files")
解除绑定名字叫files钟的一组快捷键
键判断
判断摁下的键是否为某个键
hotkeys('a', function(){
console.log(hotkeys.isPressed("A")); //=> true
console.log(hotkeys.isPressed(65)); //=> true
});
获取摁下键值
获取摁下绑定键的键值 hotkeys.getPressedKeyCodes()
hotkeys('command+ctrl+shift+a,f', function(){
console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70]
})
过滤
INPUT
SELECT
TEXTAREA
默认不处理。hotkeys.filter
返回 true
快捷键设置才会起作用,flase
快捷键设置失效。
hotkeys.filter = function(event){
return true;
}
//如何增加过滤可编辑标签 <div contentEditable="true"></div>
//contentEditable老浏览器不支持滴
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()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// @ VM2165:816InjectedScript.evaluate @ VM2165:682
Hotkeys.js 2.0.2 发布,JS 网页快捷键设置,捕获键盘输入和输入的组合键快捷键,它没有依赖的更多相关文章
-
Hotkeys.js 2.0.2 发布,捕获键盘输入和输入的组合键快捷键,它没有依赖
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k. 更新内容: 添加测试用例: 添加更多特殊键支持: 修复bug. __ ...
-
Ember.js 1.0 RC6 发布,JavaScript 框架
Ember.js 1.0 发布了第 6 个 RC 版本,下载地址:https://github.com/emberjs/ember.js/tree/v1.0.0-rc.6 该版本包含众多的改进记录,详 ...
-
窥探Vue.js 2.0 - Virtual&#160;DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
-
【翻译】Ext JS 5.0.1 中的新功能
原文:What's New in Ext JS 5.0.1 今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进.下面让我们来了解一下这些改变. 可访 ...
-
js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入
设置快捷键 这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb). hotkeys on Githubhotkeys预览 创建 您将需要在您的系 ...
-
js实现table排序-sortable.js
方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...
-
使用 js 设置组合快捷键,支持多个组合键定义,还支持 React
╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈. ┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤ ╰ ...
-
Nest.js 6.0.0 正式版发布,基于 TypeScript 的 Node.js 框架
开发四年只会写业务代码,分布式高并发都不会还做程序员? Nest.js 6.0.0 正式版发布了.Nest 是构建高效.可扩展的 Node.js Web 应用程序的框架.它使用现代的 JavaSc ...
-
AMD and CMD are dead之KMD.js版本0.0.2发布
更新 正式从UglifyJS切换至UglifyJS2 增加依赖可视化功能 压缩代码更加方便 统一风格:如main的class名也不能省略 优化了kmdjs管道 修复了无数bug 通过src开启debu ...
随机推荐
-
u3d中texture2D的Advanced设置解析
经常进行Texture2D的信息设置,以下记录每个属性的意义: 参考手册: file:///D:/Program%20Files%20(x86)/Unity4.7/Editor/Data/Docum ...
-
Java开发环境搭建——Maven配置
创建Java应用程序项目mvn archetype:generate -DgroupId=com.liq -DartifactId=firstApp -DarchetypeArtifactId=mav ...
-
Sublime Text 2 增加python版本
当系统中装有多个python版本时,Sublime Text 2 使用哪个版本需要手动添加 键入一下内容,path输入python的安转路径 保存至Python27.sublime-build文件 ...
-
输入任意一个字符串,如:“abDEe23dJfd343dPOddfe4CdD5ccv!23rr”。取出该字符串中所有的字母。顺序不能改变!并把大写字母变成小写,小写字母变成大写!
package lovo.Linyoujia; import java.util.Scanner; public class Java { @param args public static void ...
-
【GXZ的原创】C++小游戏——五子棋
前些时候考完试自己编的带有胜负判定的五子棋. 操作方法:WSAD或↑↓←→移动下棋位置,Space或Enter放置. 如果游戏出现bug,欢迎大家在评论区反馈. #include <stdio. ...
-
高效PHP开发注意事项
2015年2月26日 17:23:26 http://www.open-open.com/lib/view/open1332904714233.html
-
Activity和Service的生命周期(图)
1.Activity的生命周期 情形一.一个单独的Activity的正常的生命过程是这样的:onCreate->onStart->onPause->onStop->onDest ...
-
A*算法的C语言实现
#include ”stdio.h“ #include “conio.h” #include ”assert.h“ #include “stdlib.h” #define MAPMAXSIZE 100 ...
-
iostream与iostream.h乱弹琴
#include <iostream.h> 非标准输出流 #include <iostream> 标准输出流 见短eclipse关于使用android ndk时的简单代码 ...
-
深入解析JavaScript中的this关键字
如果问初学者js中什么东西比较难懂,很多回答会是this关键字.this在不同场景下所指向的对象不同,这就有一种扑朔迷离的感觉,放佛魔法一般神秘:this到底是什么?这里有四种绑定规则. 1. 默认绑 ...