Question

我有一个分配给箭头键的键监听器来导航幻灯片。但是，当用户在输入字段内输入时，我想暂时禁用密钥监听器。我怎样才能做到这一点？我目前的代码如下：

//Listen to the keys
    function checkKey(e) {
    switch (e.keyCode) {
    case 37:
        changeImage('prev');
        break;
    case 39:
        changeImage('next');;
        break;
        }
    }
    if (jQuery.browser.mozilla) {
            jQuery(document).keypress (checkKey);
    } else {
            jQuery(document).keydown (checkKey);
    }

谢谢。

Answer 1

有点难看，但应该有效：

var moz = jQuery.browser.mozilla;
if (moz) {
    jQuery(document).keypress(checkKey);
} else {
    jQuery(document).keydown(checkKey);
}
jQuery("#myInput").focus(function() {
    if (moz) {
        jQuery(document).unbind("keypress");
    } else {
        jQuery(document).unbind("keydown");
    }
}).blur(function() {
    if (moz) {
        jQuery(document).keypress(checkKey);
    } else {
        jQuery(document).keydown(checkKey);
    }
});

Answer 2

如果焦点在输入元素上，那么该元素将成为关键事件的目标。

所以你可以对event.target.tagName进行检查。

e.g。

function checkKey(e) {  
  switch (e.target.tagName) {  
    case "INPUT": case "SELECT": case "TEXTAREA": return;  
  }  
  // rest of your handler goes here ...  
}

Answer 3

首先，不需要浏览器检查。要检查箭头键，只需对所有键使用keydown事件。

其次，我建议（正如Sean Hogan所做的那样）在制作幻灯片之前检查事件的目标。以下内容适用于所有主流桌面浏览器：

document.body.onkeydown = function(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    var targetTagName = (target.nodeType == 1) ? target.nodeName.toUpperCase() : "";
    if ( !/INPUT|SELECT|TEXTAREA/.test(targetTagName) ) { 
        switch (evt.keyCode) {
            case 37:
                changeImage('prev');
                break;
            case 39:
                changeImage('next');
                break;
        }
    }
}

Answer 4

将onfocus和onblur事件添加到输入字段并设置全局变量值。在checkKey事件处理程序的开头检查该全局变量。

<input type="textbox" onfocus="window.inTextBox = true;" onblur="window.inTextBox = false;" />

function checkKey(e) {
 if (!window.inTextBox)
 {
  ...
 }
}

Answer 5

我非常喜欢Ilya Volodin建议的简单性，但我会在脚本中设置事件处理程序而不是将其嵌入到html中：

  var textFocus = false; 

  $("textbox").focus(function() {
      textFocus = true;
   });

  $("textbox").blur(function() {
      textFocus = false;
   });

  function navKeys() {
       if (textFocus) {
            return false;
       } else {
       ......
       }
   }

如果jquery有:focus作为选择器，那就更简单了。

      function navKeys() {
       if ($("textbox:focus") {
            return false;
       } else {
       ......
       }
   }

但这只是假设的代码。

在文本表单中禁用JavaScript密钥侦听器

5 个答案: