Слушатель ключа JavaScript отключен, когда внутри текстовой формы - PullRequest
Новая
       8

Слушатель ключа JavaScript отключен, когда внутри текстовой формы

4 голосов
/ 30 января 2010

У меня есть слушатель клавиш, назначенный клавишам со стрелками для навигации по слайд-шоу. Но я хочу временно отключить прослушиватель клавиш, пока пользователь печатает внутри поля ввода. Как я могу это сделать? Мой текущий код выглядит так: 

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

Спасибо.

Ответы [ 5 ]

2 голосов
/ 30 января 2010

Во-первых, нет необходимости проверять браузер. Для проверки клавиш со стрелками просто используйте событие keydown для всех клавиш.

Во-вторых, я предлагаю (как это сделал Шон Хоган) проверить цель мероприятия, прежде чем делать слайд-шоу. Следующее будет работать во всех основных настольных браузерах: 

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;
        }
    }
}
2 голосов
/ 30 января 2010

Если фокус находится на элементе ввода, то этот элемент будет целью для ключевых событий.

Так что вы можете просто проверить event.target.tagName.

например. 

function checkKey(e) {  
  switch (e.target.tagName) {  
    case "INPUT": case "SELECT": case "TEXTAREA": return;  
  }  
  // rest of your handler goes here ...  
}
2 голосов
/ 30 января 2010

Немного некрасиво, но должно работать: 

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);
    }
});
1 голос
/ 30 января 2010

Добавить событие onfocus и onblur в поле ввода и установить значение глобальной переменной. Проверьте эту глобальную переменную в начале вашего обработчика событий checkKey. 

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

function checkKey(e) {
 if (!window.inTextBox)
 {
  ...
 }
}
0 голосов
/ 30 января 2010

Мне очень нравится простота предложения Ильи Володина, но я бы установил обработчик событий в сценарии, а не встраивал его в 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 {
       ......
       }
   }

Но на данный момент это всего лишь гипотетический код.

...