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

我的用户希望能够按 Ctrl + S来保存表单。有没有一个好的跨浏览器的方法来捕捉 Ctrl + S组合键和提交我的表格？

应用程序是基于 Drupal 构建的，所以 jQuery 是可用的。

123114 次浏览
小开
最佳答案 
$(window).keypress(function(event) {
if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
alert("Ctrl-S pressed");
event.preventDefault();
return false;
});

不同浏览器的密钥代码可能有所不同，因此您可能需要检查不止115个密钥。

小开

您可以使用 捷径图书馆来处理浏览器特定的内容。

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

老实说，我希望 Web 应用程序不要覆盖我的默认快捷键。Ctrl + S已经在浏览器中做了一些事情。根据我浏览的网站突然做出这样的改变会造成混乱和令人沮丧，更不用说经常出现 bug 了。我已经有网站劫持 Ctrl + Tab，因为它看起来相同的 Ctrl + I，既破坏我的网站上的工作，并阻止我切换标签一如既往。

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

小开

@ Eevee: 随着浏览器成为功能越来越丰富的家园，并开始取代桌面应用程序，它不会成为一个放弃使用键盘快捷键的选项。Gmail 丰富而直观的键盘命令集对我放弃 Outlook 起到了很大作用。Todoist、谷歌阅读器和谷歌日历的键盘快捷键都让我的日常生活变得轻松许多。

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

小开

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

小开

例如:

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

小开

这应该可行(改编自 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;
}
});
小开

这个是我在 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，我会很高兴听到，如果有人在其他浏览器上测试这一点，我也会很高兴听到它的工作与否

小开

对我来说(使用 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;
}
}
});
小开

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

我综合了几个选项来支持 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;
}
});
小开

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

给 Alan Bellows 的回答是: ！(e.altKey) ，用于在输入时使用 AltGr的用户(例如，Boeing)。如果没有这个按 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; });
小开 

$(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 答案的最新版本，用 key代替了 which。它甚至可以在 Chrome 的大写键错误下工作(如果你按 Ctrl + S，它会发送大写的 S 而不是 s)。适用于所有现代浏览器。

小开

我做的这个插件可能会有帮助。

插件

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

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

在代码中我已经显示了如何执行为 Ctrl + S。你会得到详细的文件上的链接。插件是在 JavaScript 代码部分的我的笔在 Codepen。

小开

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

提交答案