web-dev-qa-db-ja.com

JQueryでCTRL + Sをキャプチャするのに最適なクロスブラウザーメソッドですか？

ユーザーがヒットできるようにしたい Ctrl+S フォームを保存します。クロスブラウザをキャプチャする良い方法はありますか Ctrl+S キーの組み合わせとフォームの送信

アプリはDrupal上に構築されているため、jQueryを使用できます。

javascriptjquery
154
ceejayoz
$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    alert("Ctrl-S pressed");
    event.preventDefault();
    return false;
});

キーコードはブラウザ間で異なる可能性があるため、115以上を確認する必要がある場合があります。

119
Jim

これは私にとって（jqueryを使用して）オーバーロードします Ctrl+S、 Ctrl+F そして Ctrl+G：

$(window).bind('keydown', function(event) {
    if (event.ctrlKey || event.metaKey) {
        switch (String.fromCharCode(event.which).toLowerCase()) {
        case 's':
            event.preventDefault();
            alert('ctrl-s');
            break;
        case 'f':
            event.preventDefault();
            alert('ctrl-f');
            break;
        case 'g':
            event.preventDefault();
            alert('ctrl-g');
            break;
        }
    }
});
235
Danny Ruijters

ショートカットライブラリ を使用して、ブラウザ固有のものを処理できます。

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});
33
EndangeredMassa

このjQueryソリューションは、ChromeとFirefoxの両方で機能します。 Ctrl+S そして Cmd+S。

$(document).keydown(function(e) {

    var key = undefined;
    var possible = [ e.key, e.keyIdentifier, e.keyCode, e.which ];

    while (key === undefined && possible.length > 0)
    {
        key = possible.pop();
    }

    if (key && (key == '115' || key == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
});
27
Alan Bellows

これはChromeで私のために働いた...何らかの理由でevent.whichは大文字のS（83）を返します、理由はわかりません（キャップ​​ロック状態に関係なく）ので、fromCharCodeとtoLowerCase安全のために

$(document).keydown(function(event) {

    //19 for Mac Command+S
    if (!( String.fromCharCode(event.which).toLowerCase() == 's' && event.ctrlKey) && !(event.which == 19)) return true;

    alert("Ctrl-s pressed");

    event.preventDefault();
    return false;
});

8でなく115になる理由を誰かが知っているなら、私は聞いてうれしいです、誰かが他のブラウザでこれをテストしてもうまくいくかどうか聞いてうれしいですか否か

25
Eran Medan

FireFox、IEおよびChromeをサポートするためにいくつかのオプションを組み合わせました。また、Macのサポートを改善するために更新しました

// simply disables save event for chrome
$(window).keypress(function (event) {
    if (!(event.which == 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true;
    event.preventDefault();
    return false;
});

// used to process the cmd+s and ctrl+s events
$(document).keydown(function (event) {
     if (event.which == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
        event.preventDefault();
        save(event);
        return false;
     }
});
7
uadrive

正直に言って、Webアプリケーションが既定のショートカットキーをオーバーライドしないようにしたいと思います。 Ctrl+S すでにブラウザで何かをしています。私が表示しているサイトによっては、その変更が突然起こることは、しばしばバグが多いことは言うまでもなく、破壊的でイライラすることです。ハイジャックサイトがあります Ctrl+Tab それはと同じに見えたので Ctrl+I、サイトでの作業が台無しになり、通常どおりタブを切り替えることができなくなります。

ショートカットキーが必要な場合は、accesskey属性を使用します。既存のブラウザ機能を壊さないでください。

5
Eevee

@Eevee：ブラウザがますます豊富な機能のホームになり、デスクトップアプリに取って代わり始めているため、キーボードショートカットの使用を控えるオプションにはなりません。 Gmailの豊富で直感的なキーボードコマンドセットは、Outlookを放棄する意欲を高めるのに役立ちました。 Todoist、Google Reader、およびGoogleカレンダーのキーボードショートカットを使用すると、日常生活がずっと楽になります。

開発者は、ブラウザですでに意味を持っているキーストロークをオーバーライドしないように注意する必要があります。たとえば、私が入力しているWMDテキストボックスは不可解に解釈します Ctrl+Del 「前方ワード削除」ではなく「ブロッククォート」として。サイト開発者が使用できる「ブラウザセーフ」ショートカットのどこかに標準リストがあり、ブラウザが将来のバージョンでは使用しないことを約束するのであれば、私は興味があります。

4
Herb Caudill
$(document).keydown(function(e) {
    if ((e.key == 's' || e.key == 'S' ) && (e.ctrlKey || e.metaKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try pressing ctrl+s somewhere.

これは@AlanBellowsの回答の最新バージョンで、whichをkeyに置き換えます。また、Chromeのキャピタルキーグリッチ（どこで押すと Ctrl+S s）の代わりに大文字のSを送信します。最新のすべてのブラウザで動作します。

3
IamGuest

この小さなプラグイン が好きです。ただし、ブラウザ間の使いやすさがもう少し必要です。

1
misteraidan

これは機能するはずです（ https://stackoverflow.com/a/8285722/388902 から適応）。

var ctrl_down = false;
var ctrl_key = 17;
var s_key = 83;

$(document).keydown(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = true;
}).keyup(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = false;
});

$(document).keydown(function(e) {
    if (ctrl_down && (e.keyCode == s_key)) {
        alert('Ctrl-s pressed');
        // Your code
        return false;
    }
});
0
pelms

Alan Bellowsの回答：！（e.altKey）を使用するユーザーに追加 AltGr 入力するとき（例：ポーランド）。このプレスなしで AltGr+S と同じ結果が得られます Ctrl+S

$(document).keydown(function(e) {
if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
{
    e.preventDefault();
    alert("Ctrl-s pressed");
    return false;
}
return true; });
0
Jaś Fasola

私が作ったこのプラグインは役に立つかもしれません。

プラグイン

このプラグインを使用して、このように実行するキーコードと機能を提供する必要があります

simulatorControl([17,83], function(){
 console.log('You have pressed Ctrl+Z');
});

コードでは、私はのために実行する方法を表示しています Ctrl+S。リンク上に詳細なドキュメントが表示されます。プラグインはCodepenの私のペンのJavaScriptコードセクションにあります。

0
Dhruv Singhal

これは私のソリューションであり、ここでの他の提案よりもはるかに読みやすく、他のキーの組み合わせを簡単に含めることができ、IE、Chrome、およびFirefoxでテストされています：

$(window).keydown(function(evt) {
    var key = String.fromCharCode(evt.keyCode);
    //ctrl+s
    if (key.toLowerCase() === "s" && evt.ctrlKey) {
        fnToRun();
        evt.preventDefault(true);
        return false;
    }
    return true;
});
0
R. Salisbury

例：

shortcut.add("Ctrl+c",function() {
    alert('Ok...');
}
,{
    'type':'keydown',
    'propagate':false,
    'target':document
});

使用法

<script type="text/javascript" src="js/shortcut.js"></script>

ダウンロード用リンク： http://www.openjs.com/scripts/events/keyboard_shortcuts/#

0
André

すなわちの問題を解決しました。デフォルトの動作を防ぐためにalert("With a message")を使用しました：

window.addEventListener("keydown", function (e) {
    if(e.ctrlKey || e.metaKey){
        e.preventDefault(); //Good browsers
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { //hack for ie
            alert("Please, use the print button located on the top bar");
            return;
        }
    }
});
0
user2570311