Question

我正在尝试为基于浏览器的应用程序实现 CTRL + S 功能。我进行了搜索，并在下面遇到了2个脚本问题

Best cross-browser method to capture CTRL+S with JQuery?
Ctrl+S preventDefault in Chrome

但是，当我尝试实现它时，它仍然有效，但我仍然可以使用默认浏览器保存对话框/窗口。

我的代码：shortcut.js

 shortcut.add("Ctrl+S",function() {
     alert("Hi there!");
 },
 {
     'type':'keydown',
     'propagate':false,
     'target':document
});

jquery hotkeys.js

$(document).bind('keydown', 'ctrl+s', function(e) {
    e.preventDefault();
    alert('Ctrl+S');
    return false;
});

我相信e.preventDefault();应该做的伎俩，但由于某种原因它不起作用。我哪里出错。如果它很简单，仍在学习javascript。
谢谢你的时间

Answer 1

您不需要任何这些库，只需尝试：

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

问题是您的代码在alert()停止，导致您的功能无法中断保存对话框。

（仍然使用jQuery）

Answer 2

这只是为我使用的问题添加不同的实现。 改编自SO答案。也适用于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);

Answer 3

人们似乎仍然在看这个，所以值得指出的是，这里不需要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
}

这应该适用于所有浏览器，这也适用于使用Windows上QWERTY的替代键盘布局的人，报告错误的密钥代码（在我的测试中至少在Windows 10上的Chrome 56上）

然而，这看起来很笨拙，令人困惑，所以如果你只支持现代浏览器，你可以改为：

document.addEventListener("keydown", function keydown (event) {
    if (navigator.platform === "MacIntel" ? event.metaKey : event.ctrlKey && event.key === "s") {
        event.preventDefault()

        // ... your code here ...
    }
})

Answer 4

无需使用任何插件，只需使用以下jquery代码

$(document).bind('keydown', 'ctrl+s', function (e) {
        if (e.ctrlKey && (e.which == 83)) {

            e.preventDefault();
            //Your method()
            return false;
        }
    });

由于您正在使用警报，执行会在警报处停止，并且在您关闭警报框之前不会执行“return false”，这就是您看到默认对话框的原因。

如果您的方法长时间运行，请更好地使用asyn方法。

Answer 5

截至2017年，您不应使用e.keyCode === 83，而应使用e.key === 's'，因为前者已被弃用。

处理浏览器的'ctrl + s'按键事件

5 个答案: