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），不知道为什么（不管大写锁定状态）所以我使用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;
});

如果有人知道为什么我得到83而不是115，我会很高兴听到，如果有人在其他浏览器上测试它，我会很高兴听到它是否有效

于 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因为它看起来与Ctrl+相同I，既破坏了我在网站上的工作，又阻止了我像往常一样切换标签。

如果需要快捷键，请使用accesskey属性。请不要破坏现有的浏览器功能。

于 2008-09-18T17:35:13.087 回答
4

@Eevee：随着浏览器成为功能越来越丰富的家，并开始取代桌面应用程序，放弃使用键盘快捷键不会成为一种选择。Gmail 丰富而直观的键盘命令集有助于我放弃 Outlook。Todoist、谷歌阅读器和谷歌日历中的键盘快捷键都让我每天的生活变得更加轻松。

开发人员绝对应该小心不要覆盖在浏览器中已经有意义的击键。例如，我正在输入的 WMD 文本框莫名其妙地将Ctrl+解释Del为“Blockquote”而不是“向前删除单词”。我很好奇网站开发人员是否可以使用“浏览器安全”快捷方式的标准列表，并且浏览器将承诺在未来的版本中远离。

于 2008-11-05T17:53:11.943 回答
1

我喜欢这个小插件。不过，它需要更多的跨浏览器友好性。

于 2009-06-10T04:08:02.177 回答
1

对艾伦·贝洛斯的回答： !(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

这应该有效（改编自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 回答
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

我制作的这个插件可能会有所帮助。

插入

您可以使用此插件，您必须提供要像这样运行的关键代码和功能

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

在代码中，我展示了如何执行 for Ctrl+ S。您将在链接上获得详细文档。插件位于 Codepen 上我的笔的 JavaScript 代码部分。

于 2017-07-07T14:44:27.470 回答
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 回答