Различать фокусное событие, вызванное клавиатурой / мышью - PullRequest
Новая
       7

Различать фокусное событие, вызванное клавиатурой / мышью

21 голосов
/ 13 апреля 2011

Я использую автозаполнение jquery ui и хочу расшифровать события фокуса, вызванные взаимодействием с клавиатурой и мышью. Как бы я пошел по этому поводу? 

$('input').autocomplete({
    source: function(request, response) {
        ...
    },
    focus: function(event, ui) {
        // If focus triggered by keyboard interaction
            alert('do something');
        // If focus event triggered by mouse interaction
            alert('do something else');
    }
});

Спасибо

Ответы [ 4 ]

5 голосов
/ 13 апреля 2011

Единственный способ, которым я могу думать об этом, - это заставить обработчик прослушивать события keypress и click и включать / выключать логический флаг.Затем на обработчике ввода focus вы можете просто проверить, каково значение вашего флага, и перейти оттуда.

Вероятно, что-то вроде 

var isClick;
$(document).bind('click', function() { isClick = true; })
           .bind('keypress', function() { isClick = false; })
           ;

var focusHandler = function () {
    if (isClick) {
        // clicky!
    } else {
        // tabby!
    }
}

$('input').focus(function() {
    // we set a small timeout to let the click / keypress event to trigger
    // and update our boolean
    setTimeout(focusHandler,100);
});

Взбил небольшойрабочий прототип на jsFiddle (разве вам не нравится этот сайт?). Проверьте его, если хотите.

Конечно, все это выполняется на событии focus на <input>, но обработчик focus на автозаполнении работает в

* * * * * * * * * * * * * * * * * * * * * * * * * * setTimeout будет немного задерживаться, но при 100 мс может быть незначительным, в зависимости от ваших потребностей.

5 голосов
/ 10 ноября 2011

Вы должны быть в состоянии определить это по объекту события, который передается в событие фокуса.В зависимости от структуры вашего кода это может отличаться, но обычно есть свойство с именем originalEvent, которое может быть вложено до некоторой глубины.Изучите объект event более внимательно, чтобы определить правильный синтаксис.Затем проверьте на mousenter или keydown с помощью регулярного выражения.Как то так: 

focus: function(event, ui){
  if(/^key/.test(event.originalEvent.originalEvent.type)){
    //code for keydown
  }else{
    //code for mouseenter and any other event
  }
}
3 голосов
/ 04 апреля 2016

Самый простой и элегантный способ достижения этой цели - использовать библиотеку " What Input? ". Он крошечный (~ 2K минимизирован) и предоставляет вам доступ к типу события как в сценариях: 

if (whatInput.ask() === 'mouse') {
  // do something
}

... а также (через один атрибут данных, который он добавляет к документу body) стили: 

[data-whatinput="mouse"] :focus,
[data-whatinput="touch"] :focus {
  // focus styles for mouse and touch only
}

Мне особенно нравится тот факт, что, когда вы просто хотите другое визуальное поведение для мыши / клавиатуры, это позволяет делать это в таблице стилей (там, где это действительно нужно), а не с помощью какого-то хакерского кусочка проверки событий Javascript (хотя конечно, если вам нужно сделать что-то, что не является чисто визуальным, первый подход позволяет вам обрабатывать его в Javascript).

0 голосов
/ 13 апреля 2011

Первое, что приходит на ум, это то, что вы можете найти положение мыши и проверить, находится ли она в пределах положения элемента

Используйте это, чтобы сохранить положение элемента: 

var input = $('#your_autocompleted_element_id'),
    offset = input.offset(),
    input_x = offset.top,
    input_y = offset.left,
    input_w = input.outerWidth(),
    input_h = input.outerHeight();

Затем используйте это, чтобы найти абсолютное положение мыши в окне: 

var cur_mx, cur_my;
$(document).mousemove(function(e){
   cur_mx = e.pageX;
   cur_my = e.pageY;
});

Тогда в вашей автоматической настройке: 

focus: function(event, ui) {
   // mouse is doing the focus when...
   // mouse x is greater than input x and less than input x + input width
   // and y is greater than input y and less than input y + input height
   if (cur_mx >= input_x && cur_mx <= input_x + input_w && cur_my >= input_y && cur_my <= input_y + input_h) {
      // do your silly mouse focus witchcraft here
   } else {
      // keyboard time!
   }
}
...