[原创]Javascript 利用mousetrap.js进行键盘事件操作

2024-04-27 14:13:34

字体：大中小

来源：转载

供稿：网友

[原创]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