资讯专栏INFORMATION COLUMN

js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入

王晗 / 1230人阅读

摘要:设置快捷键这是一个强健的库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有。返回快捷键设置才会起作用,快捷键设置失效。

设置快捷键




这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb)。

hotkeys on Github
hotkeys预览

  __            __    __                         
 |  |--..-----.|  |_ |  |--..-----..--.--..-----.
 |     ||  _  ||   _||    < |  -__||  |  ||__ --|
 |__|__||_____||____||__|__||_____||___  ||_____|
                                   |_____|   
创建

您将需要在您的系统上安装的 Node.js。

# bower 安装
$ bower install hotkeysjs

# npm 安装
$ npm install hotkeys-js

# 在页面上引用需要压缩的话,运行
$ grunt dist

# 在dist目录中生成下列文件:
# dist/hotkeys.js
# dist/hotkeys.min.js
# dist/hotkeys.min.map
定义快捷键
// 定义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/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", "issues", function(){
    console.log("干点活儿");
});
hotkeys("o, enter", "files", function(){ 
    console.log("另一种活儿");
});

// 设定范围scope 
hotkeys.setScope("issues"); // 默认所有事儿都干哦 
删除标记快捷键

删除区域范围标记

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;
}
//如何增加过滤可编辑标签 
//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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85696.html

相关文章

  • 用来捕获键盘输入keypress.js介绍

    摘要:最简单的监听办法就是使用使用格式如下它有两个参数,第一个参数是指定的单个按键或者组合键,第二个参数是一个回调函数,它在每一次用户按下指定的时被调用。 keypress.js是一个捕获键盘输入的JavaScript库,它简单易用,轻量级的压缩版本只有9kB左右,并且没有依赖其他JavaScript库。 我们通常用键盘事件来监听keydown和keyup事件。当按下键盘的任意键的时候,ke...

    cuieney 评论0 收藏0
  • jQuery 事件(一) 鼠标与键盘事件

    jQuery 鼠标事件 click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的,下面以click()事件为例 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少 点击触发 $(ele...

    Gemini 评论0 收藏0
  • JQuery基础修炼-事件篇

    摘要:目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中,最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作,另一个方法是方法用于监听用户双击操作。 目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 cli...

    yy13818512006 评论0 收藏0
  • JQuery基础修炼-事件篇

    摘要:目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中,最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作,另一个方法是方法用于监听用户双击操作。 目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 cli...

    hikui 评论0 收藏0

发表评论

0条评论

王晗

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<