Question

我的用户希望能够点击 Ctrl + S 来保存表单。是否有一种良好的跨浏览器方式来捕获 Ctrl + S 组合键并提交表单？

App基于Drupal构建，因此可以使用jQuery。

Answer 1

这适用于我（使用jquery）重载 Ctrl + S ， Ctrl + F 和< KBD>控制 + ：

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

Answer 2

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

密码可能因浏览器而异，因此您可能需要检查的不仅仅是115。

Answer 3

您可以使用shortcut library来处理特定于浏览器的内容。

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

Answer 4

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

Answer 5

这个在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 ，我会很高兴听到，如果有人在其他浏览器上测试过这个，我会很高兴听到如果它的工作原理

Answer 6

我结合了一些选项来支持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;
     }
});

Answer 7

老实说，我希望Web应用程序不会覆盖我的默认快捷键。 Ctrl + S 已在浏览器中执行某些操作。根据我正在观看的网站突然改变这种情况是破坏性和令人沮丧的，更不用说经常出现问题了。我有网站劫持 Ctrl + Tab ，因为它看起来与 Ctrl + I 相同，都毁了我的在网站上工作并阻止我像往常一样切换标签。

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

Answer 8

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

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

Answer 9

<Border x:Name="myBorder2">
    <ScrollViewer Height="200px">
        <StackPanel x:Name="gradpaneldesc">
        </StackPanel>
    </ScrollViewer>
</Border>

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

这是@AlanBellows答案的最新版本，将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Try pressing ctrl+s somewhere.替换为which。它也适用于Chrome的首都密钥故障（如果按 Ctrl + S ，它会发送大写S而不是s）。适用于所有现代浏览器。

Answer 10

我喜欢this little plugin。它需要更多的跨浏览器友好性。

Answer 11

示例：

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

Answer 12

这应该有效（改编自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;
    }
});

Answer 13

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

Answer 14

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

Answer 15

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

Plugin

您可以使用此插件提供密钥代码和功能，以便像这样运行

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

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

Answer 16

这是我的解决方案，比其他建议更容易阅读，可以轻松包含其他组合键，并已在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;
});

使用JQuery捕获CTRL + S的最佳跨浏览器方法？

16 个答案: