使用Mousetrap处理键盘快捷键(keypress.js和jQuery.hotkeys.js的使用)

来源：互联网发布：java cors 跨域编辑：程序博客网时间：2024/06/05 06:47

使用Mousetrap处理键盘快捷键(keypress.js和jQuery.hotkeys.js的使用)

对于键盘快捷键和键记录来说，两个较为流行的库为Mousetrap和keypress，其中keypress的维护更好一点，下面是keypress的使用案例，首先你需要，下载keypress.js
下载网址：http://dmauro.github.io/Keypress/“>http://dmauro.github.io/Keypress/

<!DOCTYPE html><html><head>  <meta name="description" content="math.js | basic usage">  <title>keypress.js的使用</title>  <script type="text/javascript" src="keypress.js"></script></head><body><div id="msg">Press Shift-r or Press a b c</div><script>//keypress.js的使用var message = document.getElementById("msg");var listener = new window.keypress.Listener();listener.simple_combo("shift r",function(){    message.innerHTML = "Press shift+r";});listener.sequence_combo("a b c",function(){    message.innerHTML="you press A or B or C";});//记录按键按下的次数listener.counting_combo("shift s", function(e, count) {    console.log("You've pressed this " + count + " times.");});//扩展更多的内容listener.register_combo({    "keys":"alt m",    "on_keydown":function(){        msg.innerHTML = "alt m down";    },    "on_keyup":function(){        msg.innerHTML = "alt m up";    },    "is_unordered":true});//一次添加多个按键var scope = this;//this 为 window对象listener.register_many([    {        "keys":"alt m",        "on_keydown":function(){            msg.innerHTML = "alt m down";        },        "on_keyup":function(){            msg.innerHTML = "alt m up";        },        "is_unordered":true,        "this":scope    },    {        "keys":"alt v",        "on_keydown":function(){            msg.innerHTML = "alt v down";        },        "on_keyup":function(){            msg.innerHTML = "alt v up";        },        "is_unordered":true,        "this":scope    }]);</script></body></html>

Keypress.js非常的简单易用，它的方法，其中前3个为基本方法：
+ simple_combo:用于典型的两键快捷键方式，例如Ctrl+A
+ counting_combo:接收两个参数，键盘序列和计数器
+ sequence_combo:接收按键的一个序列
+ register_combo:接收一个对象，该对象指定了和键盘操作的任意多个属性
+ register_many:一次性注册几个快捷方式
+ unregister_combo(shift r)注销快捷键
+ unregister_many(变量名）
+ reset:重置所有的组合

使用jQuery的扩展库jquery.hotkeys.js
下载地址:https://code.google.com/archive/p/js-hotkeys/downloads

<!DOCTYPE html><html><head>  <meta name="description" content="math.js | basic usage">  <title>keypress.js的使用</title>  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>  <script type="text/javascript" src="jquery.hotkeys-0.7.9.min.js"></script></head><body><div id="message"></div><script>$(document).ready(function($) {    $(document).on('keydown', null,'shift+r', function(event) {        event.preventDefault();        $("#message").html("you press shift+r");        /* Act on the event */    });}); </script></body></html>

阅读全文

0 0