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


162

ユーザーがCtrl+ Sを押してフォームを保存できるようにしたいと考えています。Ctrl+ Sキーの組み合わせをキャプチャしてフォームを送信するための、クロスブラウザの優れた方法はありますか?

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

回答:


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

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


5
OS X Webkitブラウザーではcmd + sは19を返すので、それを確認する価値もあります。つまり、if(!(event.which == 115 && event.ctrlKey)&&!(event.which == 19))がtrueを返す;
Tadas T 10/10/22

6
私にとってはFirefoxでのみ機能します。IE9とChromeはキー操作を登録しません。
pelms

7
($(window).keypressの代わりに)$(document).keypressを使用しても、IEとChromeはスクリプトが実行する前に 'Ctrl'を使用してkeypressイベントを取得します。
pelms

16
クロームでのkeydown代わりに使用keypress
destan

3
残念ながらそれは時代遅れです
Cannicide

250

これは私にとって(jqueryを使用して)Ctrl+ SCtrl+ FCtrl+ をオーバーロードするために機能します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;
        }
    }
});

8
これはクロームバージョン28.0.1500.71を含め、私がテストしたすべてのブラウザで私のために働いていた唯一の答えである
T.ブライアン・ジョーンズ

27
window.addEventListener(代わりに使用すると、純粋なJSで実行可能$(window).bind(

2
@NatesSアラートを削除すると、保存ダイアログは開きません。アラートが原因です。すべてのブラウザで正常に動作します。素晴らしい回避策。
CrazyNooB 2014

2
私のために働いた。上記の回答よりも、この回答を受け入れてください。
pavanw3b 2015年

1
@Fireflight:else if元のifステートメントはすでにtrueとして評価されるため、は機能しません。元のifステートメントの前にコードを置き、元のステートメントをに変換する必要がありelse ifます。
Danny Ruijters

34

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

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

7
これは、jQueryプラグインに変換フォークとreforked、現在は1.6.xのサポートされています:github.com/ricardovaleriano/jquery.hotkeys
フェリックスSaparelliを

12
仲間のGoogle社員の場合、jQueryプラグインの更新されたURLは、github.com
jeresig

28

このjQueryソリューションは、ChromeとFirefoxのCtrl+ SCmd+の両方で動作し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;
}); 

1
これは、ここで適切に機能している唯一のソリューションです。どうもありがとう!
Stephan Weinhold 2015

1
これは現在古くなっている可能性があります:のe.key代わりに使用してくださいe.which
カンニサイド

2017年5月14日、最新の標準に更新。
アランベローズ2017年

28

この1は、何らかの理由で... 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;
});

私が115ではなく83になる理由を誰かが知っているなら、私は喜んで聞くでしょう、そして誰かが他のブラウザでこれをテストした場合、それが機能するかどうかを聞いて喜んでいます


私はクロムと同じ問題を抱えています。このような痛み!
qodeninja 2013年

ps今それを見て、return falseがそれをトリガーする(そしてstopPropagation)ので、preventDefaultは冗長であると思いますが、質問にとってそれがあまり重要ではないことを確信しています
Eran Medan

7

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;
     }
});

5

Webアプリケーションで、デフォルトのショートカットキーを正直に上書きしないようにしたいと思います。 Ctrl+はSすでにブラウザで何かをしている。私が表示しているサイトに応じて突然変更することは、しばしばバグがあることは言うまでもなく、破壊的でイライラさせられます。私はサイトが乗っ取っ持っていたCtrl+ Tabそれは同じに見えたので、Ctrl+ I両方のサイト上で自分の仕事を台無しにし、いつものようにタブを切り替えるから私を防止し、。

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


2
私は完全に同意しますが、残念ながら、私は意思決定者ではなく、実行している牡丹です。
ceejayoz 2008

24
確かに、CTRL + Sは頻繁に使用される機能ではありません。特にあなたがあなたのファイルをあなたのウェブアプリに保存できることを意味するならば、人々がそれを見逃すことはないでしょう。
EndangeredMassa

13
私は通常、あなたに同意し、私は時間だけ今まで私は、私がWebアプリケーションを使用していることを忘れて、ショートカットが便利な何かを期待していたときに、ブラウザでCtrl-Sを使用することです。私は通常がっかりしています。Gmailはctrl-sを押したときにメールを保存しますが、期待どおりの動作をし、すべてのデスクトップアプリが何をするのかは気付かないため、気付かないでしょう。gmailをHTMLとして保存したいと思ったときに気が付くでしょう。
カーソンマイヤーズ

4
これは本当にアプリケーションに依存します。ターミナルエミュレーターのWebアプリを構築していて、必要でない場合はctrl + cをオーバーライドするのが現実的です。
ブラック

HTMLページを実際に保存する必要性はかなり薄いです。しかし、他の人が言ったように、ブラウザーは私たちが仕事をする場所、私たちのすべての仕事に急速になりつつあり、ますます多くのブラウザーがワードプロセッサーやデスクトップで従来使用されている他のアプリに取って代わり、ユーザーはキーボードに慣れていますので、それらをサポートすることは、ユーザビリティと採用のために不可欠です。ワードプロセッサを作成し、ALT + SHIFT + Sまたはそれより悪いことを実行させた場合、ユーザーとしての悪い習慣のようにアプリをダンプします。
DavidScherer 14

4

@Eevee:ブラウザーがますます豊富な機能のホームとなり、デスクトップアプリに取って代わるようになると、キーボードショートカットの使用を忘れるオプションにはなりません。Gmailの豊富で直感的なキーボードコマンドのセットは、Outlookを放棄する私の意欲に役立ちました。Todoist、Googleリーダー、Googleカレンダーのキーボードショートカットを使用すると、毎日の生活がずっと簡単になります。

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


1
答えは「いいえ」です。ブラウザに安全なショートカットの安全なリストはありません。そして、それは2つの理由に適しています。1.ショートカットはカスタマイズ可能です(少なくともOperaでは)。2.そうすることで、ブラウザーベンダーの創造性を制限することなく、ブラウザーの使用自体により多くの力を与えることができます。
ギズモ

3

$(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が送信されます)。すべての最新のブラウザで動作します。


これをテストするには、スニペットボックス内をクリックし、Ctrl + Sを押します。
カンニサイド

1

これは私の解決策であり、ここの他の提案よりもはるかに読みやすく、他のキーの組み合わせを簡単に含めることができ、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;
});

1
を使用する場合は+1 String.fromCharCode。ただし、Macにはコントロールキーがありません。コマンドキーをテストしevt.metaKeyます。trueMacではCmd、WindowsではWin に戻ります。
KatoFett


0

これは機能するはずです(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

Alan Bellowsの回答へ:AltGr入力時に使用するユーザー向けに!(e.altKey)が追加されました(例:ポーランド)。この押さず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

私が作成したこのプラグインが役立つ場合があります。

プラグイン

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

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

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


0

IEで問題を解決し、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;
        }
    }
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.