javascript 处理浏览器的“ctrl+s”按键事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14561988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling 'ctrl+s' keypress event for browser
提问by coderunner
I was trying to implement the CTRL+Sfeature for a browser based application.I made a search and came across 2 scripts in the following to questions
我试图为基于浏览器的应用程序实现CTRL+S功能。我进行了搜索并在以下问题中遇到了 2 个脚本
Best cross-browser method to capture CTRL+S with JQuery?
Ctrl+S preventDefault in Chrome
使用 JQuery 捕获 CTRL+S 的最佳跨浏览器方法？
Ctrl+S 在 Chrome 中阻止默认
However,when I tried to implement it,it worked but,I still get the default browser save dialog box/window.
但是，当我尝试实现它时，它起作用了，但是，我仍然得到默认的浏览器保存对话框/窗口。
My Code:For shortcut.js
我的代码：对于 shortcut.js
shortcut.add("Ctrl+S",function() {
alert("Hi there!");
},
{
'type':'keydown',
'propagate':false,
'target':document
});
jquery hotkeys.js
jquery hotkeys.js
$(document).bind('keydown', 'ctrl+s', function(e) {
e.preventDefault();
alert('Ctrl+S');
return false;
});
I believe e.preventDefault();should do the trick,but for some reason it doesn't work.Where am I going wrong.Sorry if it is simple,still learning javascript.
Thank you for your time.
我相信e.preventDefault();应该可以解决问题，但由于某种原因它不起作用。我哪里出错了。对不起，如果它很简单，仍在学习 javascript。
感谢您的时间。
回答by Cerbrus
You don't need any of those libraries, just try this:
你不需要任何这些库，试试这个：
$(document).on('keydown', function(e){
if(e.ctrlKey && e.which === 83){ // Check for the Ctrl key being pressed, and if the key = [S] (83)
console.log('Ctrl+S!');
e.preventDefault();
return false;
}
});
The problem was that your code halted at the alert(), preventing your function from interrupting the save dialogue.
问题是您的代码停在alert()，防止您的功能中断保存对话。
(Still uses jQuery)
（仍然使用 jQuery）
回答by coderunner
This is to just add a different implementation to the question used by me. Adapted from a SO answer.Also,works for MAC
这只是为我使用的问题添加不同的实现。 改编自 SO answer.Also，适用于 MAC
document.addEventListener("keydown", function(e) {
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
//your implementation or function calls
}
}, false);
回答by Xenxier
People are still viewing this it seems, so it's probably worth pointing out that there is no need for jQuery on this one, here:
人们似乎仍在查看此内容，因此可能值得指出的是，这里不需要 jQuery：
function keydown (event) {
var isCtrlKeyDown = navigator.platform.indexOf("Mac") > -1 ? event.metaKey : event.ctrlKey,
isSDown = (event.key && event.key === "s") || (event.keyCode || event.which) === 83 // falls back to keycode if no event.key
if (isCtrlKeyDown && isSDown) {
// prevent default event on newer browsers
if (event.preventDefault) {
event.preventDefault()
}
// ... your code here ...
// prevent default event on older browsers
return false
}
}
// register the event
if (document.addEventListener) {
document.addEventListener("keydown", keydown)
} else {
document.onkeydown = keydown
}
That should work in all browsers, this will also work for folks using alternative keyboard layouts from QWERTY on Windows, which reports incorrect key codes (at least on Chrome 56 on Windows 10 in my testing)
这应该适用于所有浏览器，这也适用于在 Windows 上使用 QWERTY 的替代键盘布局的人，它报告错误的键码（至少在我的测试中在 Windows 10 上的 Chrome 56 上）
However, this looks kind of clunky, and confusing, so if you are only supporting modern browsers, you can do the following instead:
但是，这看起来有点笨拙且令人困惑，因此如果您只支持现代浏览器，则可以改为执行以下操作：
document.addEventListener("keydown", function keydown (event) {
if (navigator.platform === "MacIntel" ? event.metaKey : event.ctrlKey && event.key === "s") {
event.preventDefault()
// ... your code here ...
}
})
回答by carkod
As of 2017, instead of using e.keyCode === 83you should use e.key === 's'as the former is deprecated.
截至 2017 年，e.keyCode === 83您应该使用而不是使用，e.key === 's'因为前者已被弃用。
回答by Rohit Patel
No need to use any plugin, just use below jquery code
无需使用任何插件，只需使用下面的 jquery 代码
$(document).bind('keydown', 'ctrl+s', function (e) {
if (e.ctrlKey && (e.which == 83)) {
e.preventDefault();
//Your method()
return false;
}
});
Since you are using alert, the execution halts at the alert and "return false" is not executed until you close the alertbox, thats the reason you see the default dialog.
由于您正在使用警报，因此执行会在警报处停止，并且在您关闭警报框之前不会执行“返回假”，这就是您看到默认对话框的原因。
If your method is long running better use asyn method method instead.
如果您的方法长时间运行，最好改用 asyn 方法。
