[原創]Javascript 利用mousetrap.js進行鍵盤事件操做

時間 2019-11-25

標籤原創 javascript 利用 mousetrap.js mousetrap 進行鍵盤事件欄目 JavaScript 简体版

原文原文鏈接

咱們平常開發中，會遇到js的鍵盤操做，例如回車提交表單之類的。或者按下某個鍵執行某個方法。無心中發現一個大小不到4K的js文件，它很是方便的操做鍵盤事件。javascript

本身也嘗試了一下：具體代碼以下：html

詳情能夠去其逛網查看其API並下載，地址：http://craig.is/killing/micejava

<!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鍵"); });jquery

            Mousetrap.bind('enter', function () { alert("按下了enter鍵"); });
            Mousetrap.bind('x', function () { alert("按下了x鍵"); }, 'keyup');git

            Mousetrap.bind('shift+k', function (e) {
                alert("按下了組合鍵shift+k");
                return false;
            });github

        });</script>
</head>
<body>
</body>
</html>xml

效果圖：htm

特此記錄一下。方便之後查找，也但願給剛恰好有此須要的人帶了一些幫助。blog

PS：固然也還有其它JS庫選擇，如Keyboard.js,地址：https://github.com/RobertWHurst/KeyboardJS，但我的感受這個文件體積較大有20多K。因此沒有太多特殊需求的話，推薦mousetrap.js 事件