使用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>

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

ASP.NETmvc常用JQUERY收藏【jquery.form.js结合jquery.validate.js】
虽然jquery.form.js可以通过自定义验证方式实现个性化的验证,不过我们大量使用的还不是一个红星(*) 在jquery.form.js下使用jquery.validate.js就可以简简单单的 ...
当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件，至少要选择两次时间，才能验证成功的问题...
当用 bootstrap-datepicker.js 这个插件选择时间,再用jquery.validate.js进行验证,当时间不为空时则验证通过.可能由于在时间插件弹出来时,input框的值发生改变 ...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...
electron快捷键_如何在Electron JS应用程序中添加键盘快捷键？
electron快捷键 Just like in any other native desktop application, keyboard shortcuts save time and make ...
使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
<div class="bus-nav-bar ft12"><div class="navt bor-r-c pos-rel {if $int == 0 ...
jQuery 插件取url参数[jquery.url.js]的使用以及文件下载
方法一. 如题,直接上调用代码: jQuery.url.param("c") "c"就是当前url中的参数,记得要引用jquery.js和jquery.url. ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了 ...
php js记住密码功能,jquery.cookie.js实现用户登录保存密码功能的方法_jquery
本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法.分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js 在页面加载时首先尝 ...
video.js+jquery.danmu.js实现视频播放+发送弹幕
需要自己去下载video.js和jquery.danmu.js,实在下载不到的评论找我 <!DOCTYPE html> <html lang="en"> & ...

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

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

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

最新文章

热门文章