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

Posted 2023-03-31

【中文标题】使用 JQuery 捕获 CTRL+S 的最佳跨浏览器方法？

【英文标题】：Best cross-browser method to capture CTRL+S with JQuery?

【发布时间】：2008-09-18 15:40:23

【问题描述】：

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

App 是基于 Drupal 构建的，所以可以使用 jQuery。

【参考方案1】：

这对我有用（使用 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;
        
    
);

【讨论】：

这是我测试的所有浏览器中唯一适用于我的答案，包括 Chrome 版本 28.0.1500.71

如果你使用window.addEventListener(而不是$(window).bind(，可以使用纯JS

@NatesS 如果您删除警报，它不会打开保存对话框。这是由于警报引起的。在所有浏览器中对我来说都很好。很好的解决方法。

为我工作。请接受这个答案而不是上述答案。

@Firelight：else if 将不起作用，因为原始的 if 语句已被评估为 true。您必须将代码放在原始 if 语句之前，将原始代码转换为 else if。

【参考方案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 个。

【讨论】：

在 OS X webkit 浏览器上 cmd+s 返回 19，因此也值得检查。即 if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;

仅适用于我的 Firefox。 IE9 和 Chrome 不注册任何按键。

即使使用 $(document).keypress（而不是 $(window).keypress），IE 和 Chrome 仍然会在脚本执行之前使用 'Ctrl' 获取 keypress 事件。

在 chrome 中使用 keydown 而不是 keypress

很遗憾它已经过时了

【参考方案3】：

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

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

【讨论】：

这个已经转换成jQuery插件，fork再fork，现在支持1.6.x：github.com/ricardovaleriano/jquery.hotkeys

对于 Google 同事，更新后的 jQuery 插件 URL 为：github.com/jeresig/jquery.hotkeys

【参考方案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;
); 

【讨论】：

这是唯一可以正常工作的解决方案。非常感谢！

这可能已经过时了：使用 e.key 而不是 e.which;

2017 年 5 月 14 日更新为现代标准。

【参考方案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，我会很高兴听到，如果有人在其他浏览器上测试，我会很高兴听到是否有效

【讨论】：

我对 chrome 也有同样的问题。好痛！

附注现在我看了一下，我认为 preventDefault 是多余的，因为 return false 会触发它（和 stopPropagation），但不确定它对问题很重要

【参考方案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;
     
);

【参考方案7】：

$(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）时，它也可以工作。适用于所有现代浏览器。

【参考方案8】：

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

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

【讨论】：

我完全同意，但不幸的是，我是执行者，而不是决策者。

是的，但 CTRL+S 不是常用的功能。我怀疑人们会错过它，尤其是如果这意味着您可以将文件保存在您的 web 应用程序中。

我通常同意你的观点，但我曾经在浏览器中使用 ctrl-s 的唯一一次是当我忘记我正在使用 web 应用程序并期望快捷方式执行有用的东西。我通常很失望。当您按下 ctrl-s 时，Gmail 会保存您的电子邮件，尽管您永远不会注意到，因为当它只是按照您的预期执行，以及每个桌面应用程序执行的操作时，您并不会真正注意到。当它认为你想将 gmail 保存为 html 时，你会注意到，这很烦人。

这真的取决于应用程序。我正在构建一个终端模拟器网络应用程序，如果没有必要，覆盖 ctrl+c 似乎很实用。

让从来不按Ctrl+S提交表单的人投下第一块石头。

【参考方案9】：

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

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

【讨论】：

答案是否定的，没有浏览器安全快捷方式的安全列表。它有两个好处： 1. 快捷方式是可定制的（至少在 Opera 中是这样）。 2. 这样做，您不会限制浏览器供应商的创造力，从而为您提供更多的浏览器使用能力。

【参考方案10】：

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

【参考方案11】：

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

【参考方案12】：

这应该可以工作（改编自https://***.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;
    
); 

【参考方案13】：

示例：

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

【参考方案14】：

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

Plugin

你可以使用这个插件，你必须提供关键代码和功能才能像这样运行

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

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

【参考方案15】：

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

【参考方案16】：

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

【讨论】：

+1 用于String.fromCharCode。虽然，Mac 没有控制键。使用evt.metaKey 测试命令键。它为 Mac 上的 Cmd 和 Windows 上的 Win 返回 true。