[原创]Javascript 利用mousetrap.js进行键盘事件操作
2015-01-23 09:14
501 查看
我们日常开发中,会遇到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
自己也尝试了一下:具体代码如下:
详情可以去其逛网查看其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
相关文章推荐
- 【原创】多台电脑如何公用一个键盘鼠标进行操作 - Mouse with Borders 软件
- 利用js事件进行简单的表格操作
- JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
- 利用js实现页面跳转并在跳转到的页面进行判断操作
- 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作
- 利用JS对iframe父子(内外)页面进行操作的方法教程
- 如何在CSS样式中利用expression实现JavaScript中的onmouseover/onmouseout事件
- JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
- [js点滴]JavaScript之键盘事件05
- 利用JavaScript开发事件驱动的Web应用 – node.js简介
- 使用js事件机制进行通用操作&特定业务处理的协调
- 利用JavaScript实现js对user用户的分页和实现js对用户的增删改查操作
- 计算机图形学-实验3-掌握利用OpenGL函数进行鼠标、键盘操作,创建菜单
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数,利用map和reduce操作实现一个string2int()函数
- 通过javascript:和事件操作js的不同
- javascript利用setInterval进行轮询操作一例
- 服务器端 js 利用JavaScript开发事件驱动的Web应用 – node.js简介
- js---JavaScript中的事件委托/事件代理,如何通过事件委托进行异步DOM事件监听
- 利用Javascript脚本捕获键盘事件
- 利用Javascript脚本捕获键盘事件