我们日常开发中,会遇到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. Hive与Hbase关系整合

    近期工作用到了Hive与Hbase的关系整合,虽然从网上参考了很多的资料,但是大多数讲的都不是很细,于是决定将这块知识点好好总结一下供大家分享,共同掌握! 本篇文章在具体介绍Hive与Hbase整合之 ...

  2. 20145229吴姗珊 《Java程序设计》第3周学习总结

    20145229吴姗珊 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 4.1类与对象 1.对象(Object):存在的具体实体,具有明确的状态和行为 2.类(Cl ...

  3. mysql日志总结

    1.mysql慢查询设置 log-slow-queries=/alidata/mysql-log/mysql-slow.loglong_query_time = 1log-queries-not-us ...

  4. 算法(Algorithms)第4版 练习 2.2.26

    在sort函数创建aux数组: package com.qiusongde; import edu.princeton.cs.algs4.In; import edu.princeton.cs.alg ...

  5. 【转】Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式

    [转]Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式 博客分类: 企业应用面临的问题 java并发编程 Struts2的线程安全ThreadLocal模式St ...

  6. matlab查找最临近搜索knnsearch

    Idx = knnsearch(X,Y) finds the nearest neighbor in X for each query point in Y and returns the indic ...

  7. HDU 4034 Graph:反向floyd

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4034 题意: 有一个有向图,n个节点.给出两两节点之间的最短路长度,问你原图至少有多少条边. 如果无解 ...

  8. ajax实现聊天室功能

    需求如下: 先死后活. 需求分析,分析思路如图所示: 1.创建数据库 create database chat; create table messages( id int unsigned prim ...

  9. ajax如何处理返回的数据格式是xml的情况

    <!DOCTYPE html> <html> <head> <title>用户注册</title> <meta charset=&qu ...

  10. java: jdk1.8以后就不支持桥接的方式

    java: jdk1.8以后就不支持桥接的方式 如果想继续使用桥接的方式,请使用jdk1.7及以下版本.