[原创]Javascript 利用mousetrap.js进行键盘事件操作
我们日常开发中,会遇到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进行键盘事件操作的更多相关文章
- js浏览器键盘事件控制(转自新浪微博)
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- JS获取键盘事件
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...
- JS模拟键盘事件 -- 原理及小例子
提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...
- js/jquery键盘事件及keycode大全
js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...
- [转]js的键盘事件
类型 键盘事件用来描述键盘行为,主要有keydown.keypress.keyup三个事件 keydown 当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发该事件 <div id=& ...
- kibo.js 处理键盘事件的Javascript工具库
这个也是做在线编辑用到的 选中文字快捷键.提高编辑效率 https://github.com/marquete/kibo 用法很简单 Examples var k = new Kibo(); Sing ...
- 几个常用的JS鼠标键盘事件例子
首先普及一下鼠标左右键值的相关方法: 1.event.x 鼠标横轴 2.event.y 鼠标纵轴 3.event.keycode 键盘值 4.events.button==0 默认.没有按任何按 ...
- 【原生JS】键盘事件
视频播放器音量调节效果. 效果图:“我很丑!~可是我有音乐和啤酒!~” HTML: <!DOCTYPE html> <html> <head> <meta c ...
随机推荐
- 分布式数据库对比评测(Es,mongodb,redis)基础知识篇
前言 我建议大家看下这个,否则后面你不知道我在说什么. 1.ES数据库相关概念 啥是Es,说白了就是支持文档搜索的分布式数据库,专门方便搜索的,GITHUB京东现在都在用. 1.ES的数据库存放在哪里 ...
- shell 批量创建_备份 mysql 数据库 表
#!/bin/bash user=root password= socket=/var/lib/mysql/mysql.sock mycmd="mysql -u$user -p$passwo ...
- Python 注释和中文乱码
Python 注释分为三种: 1.单行注释:# 2.多行注释:前后3个单引号,或者三个双引号: 如:''' 多行注释 ''', """或者 多行注释 '"&qu ...
- vim 操作符命令和位移(如删除和修改)
一.字符删除命令:x,d,D x 删除光标下的字符,前面可以加入命令计数,如:5x 代表删除从当前光标到后面的5个字符,包括空格: X 删除光标前面的一个字符: dw 删除光标下到word后的数据: ...
- 2015 ETSI NFV用例指南
译者简介:忍忍鱼,曾经从SDNLAB获取了很多知识,现在努力为SDNLAB贡献自己的力量.爱学习,求进步!SDNLAB,么么哒! ETSI NFV ISG已经确定了9个潜在的NFV用例.本章节简单介绍 ...
- JS正则表达式,记录自己所学所用的内容
还没接触正则表达式感觉确实有那么点难度,但接触到后自己琢磨了几天也没发现那么难. 现在教教刚学的或者还没接触正则表达式的同学们入入门,一起学习. 正则表达式基本语法 ***************** ...
- gradle_学习_00_资源贴
一.官方资料 1.Gradle User Guide 中文版 二.精选资料 1.Gradle学习系列之一——Gradle快速入门 2.Gradle教程
- javaScript-进阶篇(三)
1.Window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 2.JavaScript 计时器 在JavaScript中,我们可以在设定的时间间隔 ...
- Tomcat报错:HTTP Status 500 - Wrapper cannot find servlet class
HTTP Status 500 - Wrapper cannot find servlet class com.servlet.servlet.RegServlet or a class it dep ...
- android 网络编程--socket tcp/ip udp http之间的关系
网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层,一般编程人员接触最多的就是应用层和运输层,再往下的就是所谓的媒体层了,不是我们研究的对象. 下面是应用层.运输层,网络 ...