83

JavaScript と jQuery を使用して F1-F12 キーを処理したいと考えています。

どのような落とし穴を避けるべきかはわかりません。現在、Internet Explorer 8、Google Chrome、および Mozilla FireFox 3 以外のブラウザーで実装をテストすることはできません。

完全なクロスブラウザー ソリューションへの提案はありますか? 十分にテストされた jQuery ライブラリのようなものか、それとも単純な jQuery/JavaScript のようなものでしょうか?

4

13 に答える 13

50

一般に、ファンクション キーをハイジャックすることは悪い考えであるという William の意見に同意します。そうは言っても、この機能を追加するショートカットライブラリ、およびその他のキーボード ショートカットと組み合わせを非常に巧妙な方法で見つけました。

シングルキーストローク:

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

キーストロークの組み合わせ:

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});
于 2012-01-10T12:08:08.297 に答える
27

ファンクション キーのインターセプトが可能かどうかはわかりませんが、ファンクション キーを一緒に使用することは避けたいと思います。ファンクション キーは、さまざまなタスクを実行するためにブラウザで使用されますが、その中には非常に一般的なものもあります。たとえば、Linux 上の Firefox では、少なくとも 6 つまたは 7 つのファンクション キーがブラウザーで使用するために予約されています。

  • F1 (ヘルプ)、
  • F3 (検索)、
  • F5 (リフレッシュ)、
  • F6 (アドレスバーにフォーカス)、
  • F7 (キャレット ブラウジング モード)、
  • F11 (全画面モード)、および
  • F12 (Firebug を含むいくつかのアドオンで使用)

最悪の部分は、さまざまなオペレーティング システムのさまざまなブラウザーが、さまざまなことにさまざまなキーを使用することです。これは、考慮すべき多くの違いです。より安全で、あまり使用されないキーの組み合わせに固執する必要があります。

于 2009-01-08T14:35:48.893 に答える
27

この種の質問に対する私が持っている最良の情報源は、このページです: http://www.quirksmode.org/js/keys.html

彼らが言うには、キーコードは Safari では奇妙で、他の場所では一貫しているということです (ただし、IE ではキープレスイベントはありませんが、キーダウンは機能すると思います)。

于 2009-01-12T18:36:40.550 に答える
6

最新のブラウザーおよび IE11用の ES6 でのソリューション(ES5 への変換あり):

//Disable default IE help popup
window.onhelp = function() {
    return false;
};
window.onkeydown = evt => {
    switch (evt.keyCode) {
        //ESC
        case 27:
            this.onEsc();
            break;
        //F1
        case 112:
            this.onF1();
            break;
        //Fallback to default browser behaviour
        default:
            return true;
    }
    //Returning false overrides default browser event
    return false;
};
于 2017-10-26T11:17:34.170 に答える
-1

うまくいく場合は、この解決策を試してください。

window.onkeypress = function(e) {
    if ((e.which || e.keyCode) == 116) {
        alert("fresh");
    }
}
于 2015-06-09T11:20:13.753 に答える
-1

次のようにjqueryでこれを行うことができます：

        $("#elemenId").keydown(function (e) {
            if(e.key == "F12"){
                console.log(e.key);
            }

        });
于 2018-12-24T11:41:33.453 に答える
-1

ショートカットを追加します。

$.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/

于 2015-02-25T20:55:01.737 に答える