使用Mousetrap在JavaScript中添加键盘快捷键的正确方法

本文概述

• 1.下载并安装Mousetrap
• 2.添加快捷方式

通常, 一个不愿意通过用鼠标按下和选择所有内容来浪费时间的人习惯于使用键盘快捷键来促进他的所有活动。如果你的应用程序已被此类人员广泛使用, 则你可能已经考虑使用JavaScript来实现快捷方式, 并且如果你正在寻找本教程, 那么JavaScript上的按键事件可能会遇到麻烦：

document.onkeypress = function(e){
    displayunicode(e);
};

function displayunicode(e){
    var unicode = e.keyCode? e.keyCode : e.charCode;
    console.log(unicode);
}

乍一看, 看起来还不错。但是, 如果要在按下特定键时执行某些操作, 则需要知道其代码, 此外, 如果要处理组合, 最终将得到更多代码(包括jQuery)：

$(document).keydown(function(e){
    if( e.which === 89 && e.ctrlKey ){
        alert('control + y'); 
    }else if( e.which === 90 && e.ctrlKey ){
        alert('control + z'); 
    }          
});

这就是为什么我们建议你, 如果你使用键盘组合, 请使用MouseTrap并最终遭受痛苦。压缩后约2kb, 压缩后约4.5kb, 没有外部依赖性, 并且已在以下浏览器中进行了测试：

• Internet Explorer 6+
• 苹果浏览器
• 火狐浏览器
• 铬

我是否提到它可以在IE 6+上运行？不 ？好吧, 我会再说一遍, 它适用于IE 6+。它支持特定按键, 键盘组合或按键序列的按键, 击键和击键事件。与其他库不同, Mousetrap没有任何外部依赖关系, 而只有其代码库。

1.下载并安装Mousetrap

MouseTrap的来源可从Github上获得。如果使用软件包管理器, 则可以通过NPM安装它：

npm install mousetrap

然后, 你将可以使用var Mousetrap = require(‘mousetrap’);来要求它。或者, 你可以在此处下载可分发的缩小版本或源代码, 然后使用脚本标记将其包含在文档中：

<!-- Reference mousetrap from a local file -->
<script src="mousetrap.min.js"></script>

<!-- Or using a CDN -->
<script src="https://cdn.rawgit.com/ccampbell/mousetrap/825ce50c/mousetrap.min.js"></script>

一旦被引用, 你将能够使用全局变量Mousetrap访问文档中的库。

2.添加快捷方式

要在文档中添加键盘快捷键, Mousetrap具有有用的方法bind。此方法期望将字符串或带有一些文字键盘组合的数组作为第一个参数。那就对了 ！你无需准确地知道键盘上每个键的代码即可在应用程序中添加几个快捷键。

单键

如前所述, 你可以通过在bind的第一个参数字符串上指定单个键的值来为其添加快捷键：

Mousetrap.bind('4', function() { 
    console.log('4'); 
});

Mousetrap.bind("?", function() { 
    console.log('show shortcuts!'); 
});

更改关键事件触发器

默认情况下, 按下键时(如果连续按下, 则触发Mousetrap动作)。如果要更改此行为并仅在按下键时触发一次其回调, 则可以使用bind的第三个参数指定它：

Mousetrap.bind('esc', function() { 
    console.log("You pressed escape, don't you try to run !"); 
// On keyup
}, 'keyup');

组合专用键

使用Mousetrap, 你可以指定何时按下特殊键(在Windows上为CTRL, 在Mac上为Command或Alt键)并创建组合：

Mousetrap.bind('alt+a', function() { 
    alert("You pressed ALT+A !");
});

Mousetrap.bind('command+shift+k', function() {
    console.log('command shift k !'); 
});

Mousetrap.bind(['command+k', 'ctrl+k'], function() {
    console.log('command || ctrl k !'); 
});

编码愉快！