我们日常开发中,会遇到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. CSS选择器(二)

    五.属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title ...

  2. WPF之基础概念

    一:App环境承载 我们都知道Console和WinForm程序的入口都是Main函数,WPF同样也不例外,好了,我们就新建一个WPF应用程序,VS会给我们自动生成一个MainWindow.xaml和 ...

  3. wget下载文件

    http://blog.sina.com.cn/s/blog_4af3f0d20100n1k0.html 一.下载目录 #wget -r -np -nd http://example.com/pack ...

  4. JavaScript 的 async/await

    随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await. 异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认 ...

  5. php 设置页面导航动态active类样式的添加

    在用php制作项目中,一般都是把页头和页脚分离出来.页头导航在选中状态时会有一些样式,例如active等,当页面在首页时候,导航的首页也应该是active的样式,那么,怎么用php控制这些样式的添加和 ...

  6. spring boot: 一般注入说明(四) Profile配置,Environment环境配置 @Profile注解

    1.通过设定Environment的ActiveProfile来设置当前context所需要的环境配置,在开发中使用@Profile注解类或方法,达到不同情况下选择实例化不同的Bean. 2.使用jv ...

  7. 分享知识-快乐自己:Shrio 权限标签

    一.验证当前用户是否为"访客",即未认证(包含未记住)的用户 <shiro:guest> Hi there! Please <a href="login ...

  8. Python编程-一个小爬虫工具的实现过程

    需求描述: 1,打开网站: 2,获取网站的文件内容: 3,返回保存到文件中: 这里的就用到了多线程的方法 import requests,threading,time def write_html(u ...

  9. BEC listen and translation exercise 35

    高中听力: At five o'clock, we have afternoon tea, but we don't have it in the kitchen. Father's Day is t ...

  10. 使用命令行生成 APNG 图片

    使用 apngasm 工具 下载地址 https://sourceforge.net/projects/apngasm/files/2.91/ 本地源码编译 make 或者 下载对应环境的可执行程序 ...