Question

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

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

提前感谢您的帮助。

Answer 1

如果您只是使用本机/香草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键执行操作。

Answer 2

document.onkeydown = function(e) {
    if (e.ctrlKey && e.keyCode === 83) {
        alert('hello there');

        // your code here
        return false;
    }
};

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

DEMO

Answer 3

到2020年的最新答案。

由于最近更改了Keyboard事件对象，并且现在不赞成使用其许多旧属性，因此下面是现代化的代码：

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属性，其中包含有关击键的信息。此外，某些浏览器可能不允许代码覆盖系统快捷方式。

Answer 4

document.onkeydown = function(e) {
    if (e.ctrlKey && e.keyCode === 83) {
        alert('strg+s');
    }
    return false;
};

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

Answer 5

哎呀，您想要同时更改代码以反映您的方案

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

               }
              return false;//To prevent default behaviour         
              }

将此添加到正文

  <body onkeyup="iskeypress()">

Answer 6

添加快捷方式JS库并执行以下代码：

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

然后

shortcut.add("Ctrl+S", function() {
            alert("لقد قمت بالصغط على مراقبة مع حرف السين");
        });

Answer 7

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

如何在没有jQuery或任何其他库的情况下捕获CTRL-S？

7 个答案:

DEMO