19

如何在网页中捕获CTRL+S事件？

我不想使用 jQuery 或任何其他特殊库。

提前感谢您的帮助。

4

7 回答 7

14

2020年的最新答案。

由于键盘事件对象最近发生了变化，并且它的许多旧属性现在已被弃用，这里有一个现代化的代码：

document.addEventListener('keydown', e => {
  if (e.ctrlKey && e.key === 's') {
    // Prevent the Save dialog to open
    e.preventDefault();
    // Place your code here
    console.log('CTRL + S');
  }
});

请注意新key属性，其中包含有关描边键的信息。此外，某些浏览器可能不允许代码覆盖系统快捷方式。

于 2020-02-18T10:52:08.873 回答
13

如果您只是使用本机/香草 JavaScript，这应该可以达到您所追求的结果：

var isCtrl = false;
document.onkeyup=function(e){
    if(e.keyCode == 17) isCtrl=false;
}

document.onkeydown=function(e){
    if(e.keyCode == 17) isCtrl=true;
    if(e.keyCode == 83 && isCtrl == true) {
        //run code for CTRL+S -- ie, save!
        return false;
    }
}

发生了什么？

onkeydown方法检查是否是 CTRL 键被按下（键码17 ）。如果是这样，我们将isCtrl值设置为true以将其标记为已激活并正在使用中。我们可以在onkeyup函数中将此值恢复为false 。

然后我们查看是否有任何其他键与 ctrl 键一起被按下。在此示例中，键代码83用于 S 键。您可以在此函数中添加自定义处理/数据操作/保存方法，我们返回false以尝试阻止浏览器对按 CTRL-S 键本身进行操作。

于 2012-07-06T12:30:57.820 回答
10 
document.onkeydown = function(e) {
    if (e.ctrlKey && e.keyCode === 83) {
        alert('hello there');

        // your code here
        return false;
    }
};

您需要替换document为您的实际输入字段。

演示

于 2012-07-06T12:27:33.283 回答
2 
document.onkeydown = function(e) {
    if (e.ctrlKey && e.keyCode === 83) {
        alert('strg+s');
    }
    return false;
};

有些事件无法被捕获，因为它们是由系统或应用程序捕获的。

于 2012-07-06T12:28:56.760 回答
1

糟糕，您想要同时更改代码以反映您的场景

function iskeyPress(e) {
          e.preventDefault();
            if (e.ctrlKey&&e.keyCode == 83) {
               alert("Combination pressed");

               }
              return false;//To prevent default behaviour         
              }

将此添加到正文

  <body onkeyup="iskeypress()">
于 2012-07-06T12:27:04.840 回答
0

添加 Shortcuts JS 库并执行以下代码：

<script src="js/libs/shortcut/shortcut.js" type="text/javascript"></script>

然后

shortcut.add("Ctrl+S", function() {
            alert("لقد قمت بالصغط على مراقبة مع حرف السين");
        });
于 2013-03-19T08:23:34.553 回答
0

Mousetrap是一个很棒的图书馆（Github 上有 8,000 多颗星）。

文档：https ://craig.is/killing/mice

// map multiple combinations to the same callback
Mousetrap.bind(['command+s', 'ctrl+s'], function() {
    console.log('command s or control s');

    // return false to prevent default browser behavior
    // and stop event from bubbling
    return false;
});
于 2017-09-08T19:10:46.733 回答