我们日常开发中,会遇到js的键盘操作,例如回车提交表单之类的。或者按下某个键执行某个方法。无意中发现一个大小不到4K的js文件,它非常方便的操作键盘事件。

自己也尝试了一下:具体代码如下:

详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/mousetrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            Mousetrap.bind('4', function () { alert("按下了4键"); });

            Mousetrap.bind('enter', function () { alert("按下了enter键"); });
            Mousetrap.bind('x', function () { alert("按下了x键"); }, 'keyup');

            Mousetrap.bind('shift+k', function (e) {
                alert("按下了组合键shift+k");
                return false;
            });

        });</script>
</head>
<body>
</body>
</html>

效果图:

特此记录一下。方便以后查找,也希望给刚刚好有此需要的人带了一些帮助。

PS:当然也还有其它JS库选择,如Keyboard.js,地址:https://github.com/RobertWHurst/KeyboardJS,但个人感觉这个文件体积较大有20多K。 所以没有太多特殊需求的话,推荐mousetrap.js

[原创]Javascript 利用mousetrap.js进行键盘事件操作的更多相关文章

  1. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  2. JS获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

  3. 初识 jquery.simulate.js 模拟键盘事件

    用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...

  4. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  5. js/jquery键盘事件及keycode大全

    js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...

  6. [转]js的键盘事件

    类型 键盘事件用来描述键盘行为,主要有keydown.keypress.keyup三个事件 keydown 当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发该事件 <div id=& ...

  7. kibo.js 处理键盘事件的Javascript工具库

    这个也是做在线编辑用到的 选中文字快捷键.提高编辑效率 https://github.com/marquete/kibo 用法很简单 Examples var k = new Kibo(); Sing ...

  8. 几个常用的JS鼠标键盘事件例子

    首先普及一下鼠标左右键值的相关方法: 1.event.x 鼠标横轴  2.event.y 鼠标纵轴  3.event.keycode 键盘值  4.events.button==0 默认.没有按任何按 ...

  9. 【原生JS】键盘事件

    视频播放器音量调节效果. 效果图:“我很丑!~可是我有音乐和啤酒!~” HTML: <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. Data Structure Binary Tree: Construct Tree from given Inorder and Preorder traversals

    http://www.geeksforgeeks.org/construct-tree-from-given-inorder-and-preorder-traversal/ #include < ...

  2. P4965 薇尔莉特的打字机

    题目 P4965 薇尔莉特的打字机 快到十二点了正在颓废突然发现了一道好题 虽然毒瘤,但确实是容斥原理的好题啊,做法也特别巧妙(标程 思路 题目大意(怕自己突然忘) n个初始字符,m个操作(加入或删除 ...

  3. OJ的runtime error exit code对应SIGTERM代码

    Signal Name Number Description SIGHUP 1 Hangup (POSIX) SIGINT 2 Terminal interrupt (ANSI) SIGQUIT 3 ...

  4. 双向链表(C++实现)

    ////////////////////////////////////////////////////////////////////////////////////// /////// 这里建立两 ...

  5. Docker-Mac安装

    1. 下载安装包2. 安装3. 运行,允许docker获得系统权限,它需要将Mac网卡链接至Docker app.4. 验证 打开terminaldocker versionFengZhendeMac ...

  6. Storm 执行异常 java.lang.RuntimeException: java.nio.channels.UnresolvedAddressException 问题解决

    最近写的 binlog2kafka storm job 上线在一个新的集群环境中(storm 0.9.0.1, kafka 0.8), storm job 运行时报出如下异常: java.lang.R ...

  7. 大话设计模式--命令模式 Command -- C++实现实例

    1. 命令模式: 将请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化,对请求排队或记录请求日志,以及支持可撤销的操作. 命令模式有点: a. 较容易的设计一个命令队列 b. 在需要的的情况 ...

  8. 红米note.线刷

    1.第一代 红米note 时间:20180121 这次 线刷之后,摄像头还是模糊,扫描小一点的二维码的时候 还是一片模模糊糊... 2.ZC:我下载的“通用刷机工具”名为:MiFlash2017-12 ...

  9. Hadoop- 集群启动详解

    NameNode启动过程详解 第一次启动:HDFS格式化后,生成fsimage文件 hdf

  10. php 简单判断是否微信浏览器

    今天遇到一问题,让一个页面在微信上打开和浏览器打开显示不同的按钮,这是一个建议的方法 $user_agent = $_SERVER['HTTP_USER_AGENT']; if (strpos($us ...