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

最新推荐文章于 2024-03-23 09:36:20 发布

xiantouxu

最新推荐文章于 2024-03-23 09:36:20 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签： jquery keypress

本文链接：https://blog.csdn.net/xiantouxu/article/details/77504664

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

对于键盘快捷键和键记录来说，两个较为流行的库为Mousetrap和keypress，其中keypress的维护更好一点，下面是keypress的使用案例，首先你需要，下载keypress.js
下载网址：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>

xiantouxu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用Mousetrap处理键盘快捷键(keypress.js和jQuery.hotkeys.js的使用)

对于键盘快捷键和键记录来说，两个较为流行的库为Mousetrap和keypress，其中keypress的维护更好一点，下面是keypress的使用案例，首先你需要，下载keypress.js
复制链接

扫一扫