有没有类似Fogbugz风格的好用键盘快捷键实现？

Question

Fogbugz有一个非常好的键盘快捷键实现。您按下CTRL+;，然后您按下的下一个键将对应于当前页面上的用户界面元素。这样可以很好地避免与现有浏览器键盘快捷键冲突（如果您只是尝试添加CTRL+A，CTRL+B等样式的快捷键，则会出现这种情况）。更好的是，在您按下CTRL+;之后，“每个操作上都会出现带有其快捷方式的小黄色标签”。因此，您随时都有即时的键盘快捷键参考。完整详细信息请参见：http://fogbugz.stackexchange.com/questions/4310。有人看到过基于jQuery（或其他）的实现吗？

- J22

Answer 1

有几件事情可以做到这一点。为了澄清，您想要能够使用键盘组合Ctrl + ;来触发一段代码吗？如果这是您要寻找的内容，您可以像这样做：（在jQuery中）

// For getting the function corresponding to the key
    function getPosition(arrayName,arrayItem)
    {
      for(var i=0;i<arrayName.length;i++){ 
       if(arrayName[i]==arrayItem)
            return i;
      }
    }
        // Written By Ben Bales


    var ctrlDown = false; // Tells if the cotrol button is currently down
    var semicolonDown = false; // Tells if the semicolon button is down
    var allowShortcut = false; // Allows the key following ctrl+; to run a function
    var keyTimeout = 800; // Allows the following keystroke within this amount of milliseconds after ctrl+;

    // reset allowShortcut
    function disableShortcut()
    {
         allowShortcut = false;
        console.log("dead");

    }    

    $(document).keydown(function(e){
        if(e.keyCode == 17) ctrlDown = true;
        if(e.keyCode == 186 || e.keyCode == 59) semicolonDown = true;
         //console.log("Semicolon: "+semicolonDown);
         //console.log("Ctrl: "+ctrlDown);


        // If both keys are down, allow a following key to do something


        if(allowShortcut == true)
        {
            var key = e.keyCode;
            //alert(key);

                var actionPos = getPosition(keyArray,key);
                actionArray[actionPos]();
                allowShortcut = false;

        }

        if(ctrlDown == true && semicolonDown == true)
        {
            allowShortcut = true;
            // after a certian amount of time dont allow the following key to do something
            setTimeout(disableShortcut,keyTimeout);
        }

    });

    $(document).keyup(function(e){
        if(e.keyCode == 17) ctrlDown = false;
        if(e.keyCode == 186 || e.keyCode == 59) semicolonDown = false;
    });

    // You may want to put your shortcuts in arrays with corresponding keyCodes like so:

    var actionArray = new Array(doSomething,doSomethingelse);

    var keyArray = new Array(65,66);

    // sample actions

    function doSomething()
    {
        alert("did something");
    }

    function doSomethingelse()
    {
       alert("did something else");
    }

我只是快速制作了这个，还没有测试过，但希望你能理解它试图做什么。但再说一遍，这只是一个15岁孩子的解决方案。如果你在HTML模板中设置并尝试它，请按Ctrl+;，然后按下A或B键来运行它们对应的函数。

如果你需要更多帮助，请告诉我！

- BBales

---

忽略console.log()（我用它们进行调试） - BBales

Answer 2

JQ Hotkeys插件可能是一个很好的选择...

http://code.google.com/p/js-hotkeys/

- Christophe Eblé

---

除了将按键绑定到事件处理程序之外，它似乎没有太多作用，除非我漏掉了什么？ - J22