javascript - 網頁分段載入




使用JavaScript和jQuery,跨瀏覽器處理按鍵事件(F1-F12) (8)

添加快捷方式:

$.Shortcuts.add({
    type: 'down',
    mask: 'Ctrl+A',
    handler: function() {
        debug('Ctrl+A');
    }
});

開始對快捷方式做出反應:

$.Shortcuts.start();

添加“另一個”列表的快捷方式:

$.Shortcuts.add({
    type: 'hold',
    mask: 'Shift+Up',
    handler: function() {
        debug('Shift+Up');
    },
    list: 'another'
});

激活“另一個”列表:

$.Shortcuts.start('another');
Remove a shortcut:
$.Shortcuts.remove({
    type: 'hold',
    mask: 'Shift+Up',
    list: 'another'
});

停止(取消綁定事件處理程序):

$.Shortcuts.stop();


教程:
http://www.stepanreznikov.com/js-shortcuts/

我想使用JavaScript和jQuery處理F1-F12鍵。

我不確定要避免哪些陷阱,我目前無法在除Internet Explorer 8,Google Chrome和Mozilla FireFox 3之外的任何其他瀏覽器中測試實現。

對完整的跨瀏覽器解決方案的任何建議? 像一個經過充分測試的jQuery庫或者只是vanilla jQuery / JavaScript?


哇,這很簡單。 我應該寫這個,為什麼以前沒有人這麼做?

$(function(){
    //Yes! use keydown 'cus some keys is fired only in this trigger,
    //such arrows keys
    $("body").keydown(function(e){
         //well you need keep on mind that your browser use some keys 
         //to call some function, so we'll prevent this
         e.preventDefault();

         //now we caught the key code, yabadabadoo!!
         var keyCode = e.keyCode || e.which;

         //your keyCode contains the key code, F1 to F12 
         //is among 112 and 123. Just it.
         console.log(keyCode);       
    });
});

我不確定是否可以截取功能鍵,但我會​​避免一起使用功能鍵。 瀏覽器使用功能鍵來執行各種任務,其中一些非常常見。 例如,在Linux上的Firefox中,至少有六或七個功能鍵保留供瀏覽器使用:

  • F1(幫助),
  • F3(搜索),
  • F5(刷新),
  • F6(焦點地址欄),
  • F7(插入符號瀏覽模式),
  • F11(全屏模式),和
  • F12(由幾個插件使用,包括Firebug)

最糟糕的是,不同操作系統上的不同瀏覽器對不同的東西使用不同的鍵。 這需要考慮很多差異。 你應該堅持使用更安全,不常用的鍵組合。


我同意William的觀點,一般來說劫持功能鍵是個壞主意。 也就是說,我找到了一個shortcut庫,它以非常靈活的方式添加了這個功能,以及其他鍵盤快捷鍵和組合。

單鍵擊:

shortcut.add("F1", function() {
    alert("F1 pressed");
});

擊鍵組合:

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});


捕獲F1-F12鍵的一個問題是還必須覆蓋默認功能 。 以下是F1“幫助”鍵的實現示例,其中覆蓋可以阻止默認幫助彈出窗口。 此解決方案可以擴展為F2-F12鍵 。 此外,此示例故意不捕獲組合鍵 ,但也可以更改。

<html>
<head>
<!-- Note:  reference your JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
    <h1>F-key trap example</h1>
    <div><h2>Example:  Press the 'F1' key to open help</h2></div>
    <script type="text/javascript">
        //uncomment to prevent on startup
        //removeDefaultFunction();          
        /** Prevents the default function such as the help pop-up **/
        function removeDefaultFunction()
        {
            window.onhelp = function () { return false; }
        }
        /** use keydown event and trap only the F-key, 
            but not combinations with SHIFT/CTRL/ALT **/
        $(window).bind('keydown', function(e) {
            //This is the F1 key code, but NOT with SHIFT/CTRL/ALT
            var keyCode = e.keyCode || e.which;
            if((keyCode == 112 || e.key == 'F1') && 
                    !(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
             {
                // prevent code starts here:
                removeDefaultFunction();
                e.cancelable = true;
                e.stopPropagation();
                e.preventDefault();
                e.returnValue = false;
                // Open help window here instead of alert
                alert('F1 Help key opened, ' + keyCode);
                }
            // Add other F-keys here:
            else if((keyCode == 113 || e.key == 'F2') && 
                    !(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
             {
                // prevent code starts here:
                removeDefaultFunction();
                e.cancelable = true;
                e.stopPropagation();
                e.preventDefault();
                e.returnValue = false;
                // Do something else for F2
                alert('F2 key opened, ' + keyCode);
                }
        });
    </script>
</body>
</html>

我從相關的SO文章中藉用了類似的解決方案來開發它。 如果這對您有用,請告訴我。


當您使用angular.js處理事件時,您應該使用ng-keydown來防止chrome pause in developer


這對我有用。

if(code ==112) { alert("F1 was pressed!!"); return false; }

F2 - 113,F3 - 114,F4 - 115等堡壘。





keyboard-events