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


162

我的用户希望能够点击Ctrl+ S来保存表格。有没有一种跨浏览器的好方法来捕获Ctrl+ S组合键并提交我的表格?

应用程序基于Drupal构建,因此可以使用jQuery。

Answers:


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

6
仅适用于Firefox。IE9和Chrome不会注册任何按键。
pelms 2012年

7
即使使用$(document).keypress(而不是$(window).keypress),IE和Chrome仍会在脚本执行之前通过'Ctrl'捕获键事件。
pelms 2012年

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
这是对我测试过的所有浏览器都适用的唯一答案,包括Chrome版本28.0.1500.71
T. Brian Jones

27
如果您使用的window.addEventListener(是纯JS,则可以使用它$(window).bind(

2
@NatesS如果删除警报,则不会打开保存对话框。这是由于警报引起的。在所有浏览器中都对我有效。不错的解决方法。
CrazyNooB 2014年

2
为我工作。请比上一个接受这个答案。
pavanw3b

1
@Fireflight:an else if无效,因为原始if语句已经被评估为true。您必须将代码放在原始if语句之前,然后将原始代码放在中else if
丹尼·鲁伊特斯


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

1
现在可能已经过时了:使用e.key代替e.which
杀人

2017年5月14日更新,适用于现代标准。
艾伦·贝娄

28

这个在Chrome上为我工作的...由于某种原因为我event.which返回了大写字母S(83),不知道为什么(不管大写锁定状态如何),所以我习惯fromCharCodetoLowerCase只是为了安全起见

$(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有同样的问题。真痛苦!
qodeninja

ps现在我看了一下,我认为preventDefault是多余的,因为return false会触发它(和stopPropagation),但不确定这个问题是否很重要
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

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

13
我通常同意你的观点,但我唯一一次曾经用ctrl-S在浏览器中是,当我忘记我使用的web应用程序,并期望该快捷方式做一些有用的东西。我通常很失望。当您按ctrl-s时,Gmail会保存您的电子邮件,尽管您永远不会注意到,因为当它按预期的方式运行时,以及每个桌面应用程序所执行的操作,您都不会真正注意到。您确实会注意到,当您认为要将gmail保存为HTML时,这很烦人。
卡森·迈尔斯

4
这实际上取决于应用程序。我正在构建一个终端模拟器Web应用程序,并且如果不需要的话,覆盖ctrl + c似乎很实际。
布拉克

实际保存HTML页面的需求很小,我发现自己从来没有这样做过。但是,正如其他人所说的那样,浏览器正在迅速成为我们工作的场所,我们的所有工作,并且越来越多的浏览器正在取代文字处理器和传统上在台式机上使用的其他应用,用户已经习惯了他们的键盘快捷方式,因此支持它们是可用性和采用性的必要条件。如果您创建了文字处理程序并让我按ALT + SHIFT + S或更糟的提示,那么我将以用户的不良习惯来转储您的应用程序。
DavidScherer 2014年

4

@Eevee:随着浏览器成为越来越丰富的功能的家,并开始取代桌面应用程序,它不再是放弃使用键盘快捷键的选择。Gmail丰富而直观的键盘命令集有助于我放弃Outlook。Todoist,Google Reader和Google Calendar中的键盘快捷键每天都使我的生活变得越来越轻松。

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


1
答案是否定的,没有安全的浏览器快捷方式列表。这对两个方面都有利:1.快捷方式是可定制的(至少在Opera中是这样)。2.这样,您就不会限制浏览器供应商的创造力,从而为浏览器本身提供更多的功能。
gizmo

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的答案,替换whichkey。即使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.metaKeytrue在Mac上返回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回答:!(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; });

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;
        }
    }
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.