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

Question

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

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

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

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

我希望它只对特定键有效。如果是任何其他按键，则不应运行。单击 f 时应运行，但按 CTRL + f 时不应运行。

我在 Chrome 92.0.4515.159 和 Chrome Beta 版本 94.0.4606.31 上测试了 Windows 7 和 8。

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

Answer 1

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

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

这个想法是，当您检测到按键按下时，您稍等片刻，看看是按下了其他键还是只按下了“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 的回答，了解到您想实现的快捷方式仅限于特定的组合键，额外的按键操作将停止该功能。

解决方案非常好，但阅读评论有 2 个主要问题，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 键时集中注意力。

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

Limit jQuery .keydown() to Only specific Keys

javascript

keyboard

wordpress

jquery

keydown