Question

我正试图在浏览器上同时捕获 Ctrl - S 和 Cmd - S 我的网络应用程序的OS兼容性。我在这里看到了一个关于如何做到这一点的帖子：jquery keypress event for cmd+s AND ctrl+s

我的代码中有以下代码段：

$(document).keypress(function(event) {
  if (event.which == 115 && (event.ctrlKey||event.metaKey)|| (event.which == 19)) {
    event.preventDefault();
    save();
    return false;
  }
  return true;
});

其中save()是一个JavaScript函数，将来会发送一个AJAX请求，但现在只有alert('Saved!');。

但是，虽然这会捕获 Ctrl - S ，但它不会在Chrome上捕获 Cmd - S 而不是像往常一样打开保存网页对话框。我看到该页面上的其他人遇到了同样的问题，但我没有看到解决方案。

提前致谢！

Answer 1

太巧妙了！！！真棒@ Sam0。

对于希望使用简单JavaScript版本且没有JQuery的初学者（即使您发现了问题，$()仅允许您方便地指定CSS选择器），这是脚本：

/**
* CMD+S/CTRL+S
* Function listens first to cmd or ctrl keys.
* Metaflag variable becomes true if one of those keys is pressed.
* If key "s" is then listened - before 100ms delay -, it launches your    
  instructions. 
* Without timer, "s" could happen (e.g.) 1 hour after alteration key pressed,     
* even if your just type "s" in a text. Timer is a trick to avoid this.
*/

(function(){
  var metaflag = false;
  document.addEventListener('keydown',function(event) {
    if (event.ctrlKey||event.metaKey || event.which === 19) {
      //      ctrl           cmd(mac)         break/pause key(?)
      metaflag = true;
      timer = Date.now();
    }
    if(metaflag && event.which === 83 && Date.now()-timer<100){
      //                 "S"                                //100ms
      event.preventDefault(); // maybe not necessary
      //...Your instructions...
      metaflag = false;
    }
  });
})();

Answer 2

我认为keypress因为它没有以完全相同的方式注册metakey，请参阅：Diffrence between keyup keydown keypress and input events这里是一个似乎使用keydown工作的小提琴，然后按顺序捕获每个。希望有帮助吗？

＆＃13;

var metaflag = false;

$(document).on({
	keydown: function(event) {
    if (event.ctrlKey||event.metaKey || event.which === 19) {
      event.preventDefault();
      $('.monitor').text('key '+event.which);
      metaflag = true;
    }
  	if( metaflag && event.which === 83 ){ // 83 = s?
      event.preventDefault(); // maybe not necessary
      $('.display').text('saving?');
      metaflag = false;
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='monitor'></div>
<div class='display'></div>

＆＃13;

无法在Mac上的Chrome上捕获Cmd-S

2 个答案: