将 jQuery .keydown() 限制为仅特定键

Question

我正在使用 WordPress jQuery 为我的网站构建一些快捷方式。

它按预期工作，但是当按下其他键时它不会停止。

例如，如果我按下 f，它会执行必要的任务。但如果我按CTRL + f，它也能完成任务。

事实上，我试过了，其他键，如 f 和 p，也很有效。

我希望它只适用于特定的键。 Incase 任何其他按键，它不应该运行。它应该在单击 f 时运行，但不能在 CTRL + f 上运行。

我在 Windows 7 和 8 上的 Chrome 92.0.4515.159 和 Chrome Beta 版本 94.0.4606.31 上对此进行了测试。

    jQuery(window).keydown(function(e) {
        if( e.which === 27){
            jQuery('.SearchCreationsClose').click();
        }
        if(e.key == "f"){
            e.preventDefault();
            jQuery('.SearchCreationsIcon').click();
        }
    });

Answer 1

如果按下 ctrl 键，则使用 e.ctrlKey：

 jQuery(window).keydown(function(e) {
  if(e.key=='f' && e.ctrlKey){ 
    console.log('ctrl+f');} 
  else if (e.key=='f'){ 
     console.log('"JUST" f key');
  }
 });

如果你只想捕捉 f keydown 而不是 ctrl+f:

 jQuery(window).keydown(function(e) {
   if(e.key=='f' && !e.ctrlKey){ 
     console.log('"JUST" f key');
   }
 });

Answer 2

我认为最好的解决方案是将这个：Can jQuery .keypress() detect more than one key at the same time? 与这样的某种超时合并：

var keys = {};
var eventTimeout;

$(document).keydown(function (e) {
  // Reset timeout
  if (eventTimeout) {
    clearTimeout(eventTimeout);
  }
  keys[e.which] = true;
  eventTimeout  = setTimeout(function () {
    if (typeof keys[70] !== "undefined"  && Object.keys(keys).length === 1) { // 70 is the "f" key and it is the only pressed key
      e.preventDefault();
      $('.SearchCreationsIcon').click();
    }
  }, 200); // Takes 200ms of time before going on
});

$(document).keyup(function (e) {
setTimeout(function(){
  delete keys[e.which];
},210);
});

这个想法是，当您检测到 keydown 时，您会稍等片刻，看看是否有其他键按下或只是“f”键。 keyup 清除缓冲区以确保没有剩菜

编辑组合： 这将是捕获 CTRL + SHIFT + S 的解决方案，请参阅更新的代码。我只是从 if 中移出代码并嵌套到单独的函数中。您可以轻松地抽象函数以接受同时按下的任意数量的键以及应该按下的键并创建单个函数。你明白了

var keys = {};
var eventTimeout;

$(document).keydown(function (e) {
    // Reset timeout
    if (eventTimeout) {
        clearTimeout(eventTimeout);
    }
    keys[e.which] = true;
    eventTimeout  = setTimeout(function () {
        if (isFPressed() || isMyComboPressed()) { // 70 is the "f" key and it is the only pressed key
            e.preventDefault();
            $('.SearchCreationsIcon').click();
        }
    }, 200); // Takes 200ms of time before going on
});

function isFPressed() {
    return typeof keys[70] !== "undefined" && Object.keys(keys).length === 1;
}

/**
 * 16 - Key code of SHIFT
 * 17 - Key code of CTRL
 * 83 - Key code of "s"
 * @returns {boolean}
 */
function isMyComboPressed(){
    return typeof keys[16] !== "undefined" && keys[17] !== "undefined" && keys[83] !== "undefined" && Object.keys(keys).length === 3;
}

$(document).keyup(function (e) {
    setTimeout(function () {
        delete keys[e.which];
    }, 210);
});

Answer 3

我从@diego 看到了答案，并了解您想要实现快捷键，使其仅限于特定的组合键，额外的按键将停止该功能。

解决方案非常好，但是读取 cmets 有两个主要问题，1.) 当 window 失焦时它会停止，2.) event.preventDefault 不起作用

我有一个解决方案，它可以在没有超时功能的情况下工作，从而解决e.preventDefault 问题。我使用不同的方法来实现它。

    var MyKeys= 0;

    jQuery(window).focus(function(){
        MyKeys = 0;
    });

    jQuery(window).keyup(function(e){
        if(MyKeys > 0){
            MyKeys--
        }
        else {
            MyKeys = 0;
        }
    });

    jQuery(window).keydown(function(e){
        if (!e.repeat) {
            MyKeys++
        }
        if(e.which == 70 && MyKeys === 1){
            e.preventDefault();
            console.log('f is pressed')
        }
        if(e.which == 70 && (e.ctrlKey || e.metaKey) && MyKeys === 2){
            e.preventDefault();
            console.log('ctrl+f is pressed')
        }
    });

很确定它解决了防止默认问题..

而且我认为它也将解决Alt + Tab 问题...（尚未测试但有信心）

它并不完美。只有一个小限制，如果用户在已经按下某个键的情况下进入您的 Windows，则他必须先抬起该键，然后才能使用该快捷方式。他不能只按CTRL然后按f。