捕获键盘输入和输入组合键的js库hotkeys

简介: 捕获键盘输入和输入组合键的js库hotkeys

hotkeys.js是一款用于捕获键盘输入和输入组合键的js库。hotkeys.js没有依赖,压缩后小于3kb。hotkeys.js可以捕获用户的键盘按键或组合键的输入,非常实用。

tx000451.png

在线预览 下载

安装
可以使用bower,npm来安装hotkeys.js。

# bower 安装
$ bower install hotkeysjs

# npm 安装
$ npm install hotkeys-js

使用方法
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>
    )
  }
}

传统方法
传统方法在页面中hotkeys.js。

<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 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 键!');
});
相关文章
|
4月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
152 0
|
6月前
|
设计模式 前端开发 JavaScript
javascript 异常问题之Promise的未处理异常如何捕获
javascript 异常问题之Promise的未处理异常如何捕获
|
6月前
|
前端开发 JavaScript
javascript 异常问题之Promise异常如何捕获
javascript 异常问题之Promise异常如何捕获
|
7月前
|
JavaScript CDN
js 捕获异常
js 捕获异常
43 1
|
7月前
|
JavaScript
js 捕获 await 的报错
js 捕获 await 的报错
39 1
|
7月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
108 1
|
7月前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
625 2
|
9月前
|
JavaScript 前端开发
JavaScript实现通过键盘弹钢琴的效果
JavaScript实现通过键盘弹钢琴的效果
60 0
|
9月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
62 2
|
9月前
|
JavaScript
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55