172

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

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

4

16 に答える 16

266

これは、（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;
        }
    }
});
于 2013-01-06T09:44:24.490 に答える
125 
$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    alert("Ctrl-S pressed");
    event.preventDefault();
    return false;
});

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

于 2008-09-18T15:54:32.940 に答える
34

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

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});
于 2008-09-18T16:03:09.940 に答える
30

この 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;
});
于 2013-01-17T18:21:53.673 に答える
29

これはChromeでうまくいきました...何らかの理由event.whichで大文字のS（83）が返されましたが、理由がわからない（Caps Lockの状態に関係なく）ため、安全のために使用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を取得する理由を誰かが知っている場合は、喜んで聞いてください。また、誰かが他のブラウザでこれをテストした場合、それが機能するかどうかを喜んで聞きます。

于 2012-04-23T00:55:09.770 に答える
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;
     }
});
于 2013-03-20T16:26:00.417 に答える
6 

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

于 2017-05-14T16:18:42.030 に答える
5

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

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

于 2008-09-18T17:35:13.087 に答える
4

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

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

于 2008-11-05T17:53:11.943 に答える
1

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

于 2009-06-10T04:08:02.177 に答える
1

Alan Bellows への回答: !(e.altKey) をAltGr入力時に使用するユーザー向けに追加 (ポーランドなど)。これを押さないとAltGr+は+Sと同じ結果になりますCtrlS

$(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; });
于 2016-11-03T07:20:28.237 に答える
0

例：

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/#

于 2010-07-29T19:36:26.620 に答える
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;
        }
    }
});
于 2015-07-01T00:05:25.960 に答える
0

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

$(window).keydown(function(evt) {
  var key = String.fromCharCode(evt.keyCode).toLowerCase();
  switch(key) {
    case "s":
      if(evt.ctrlKey || evt.metaKey) {
        fnToRun();
        evt.preventDefault(true);
        return false;
      }
      break;
  }
  return true;
});
于 2018-03-13T13:57:17.240 に答える
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;
    }
});
于 2012-01-06T15:21:52.113 に答える