Обнаружить длительное нажатие на клавишу Enter / OK на элементе caph-list - PullRequest
Новая
       30

Обнаружить длительное нажатие на клавишу Enter / OK на элементе caph-list

0 голосов
/ 16 января 2019

Мне нужно обнаружить долгое нажатие на клавишу Enter / OK на элементе caph-list. Я использую код ниже: 

$("#channels-list-container").caphList({
    items: MyTVApp.groupChannels,
    template: "channels-list-item-template",
    direction: "vertical",

}).on("focused", function(event) {
    MyTVApp.focusedChannelIndex = Number(event.target.dataset.focusableName.split("channel")[1]);

}).on("selected", function(event) {
    var channelIndex = Number(event.target.dataset.focusableName.split("channel")[1]);
    var file = event.target.dataset.file;
    MyTVApp.displayPlayingScreen(file);
});

Как я могу обнаружить долгое нажатие на клавишу Enter / OK, когда фокус находится на элементе списка заглавных букв?

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Как уже упоминалось @basic, вам нужен какой-то механизм для определения времени, прошедшего между первым нажатием клавиши и событиями keyup.

Код ниже должен дать вам пример того, как вы могли бы достичь этого. Помните, что это всего лишь пример, и, возможно, его нужно будет адаптировать к вашим конкретным потребностям, но он разработан как отдельная и общая функция; он не имеет прямого отношения к логике вашего приложения.

Если вы запустите приведенный ниже пример кода, сфокусируйтесь на поле ввода и нажмите клавишу ввода не менее одной секунды, вы должны увидеть запись в журнале консоли, которая обнаружила событие. 

// Long-key-press event detection
(function() {
  var duration = 1000,
      timer = null;

  $(document).on('keydown', function(event) {
    // Check if timer is already running.
    if(timer !== null) return;

    // Start new timer.
    timer = window.setInterval(function() {
      // Trigger longKeyPress event on the currently selected element when the timer finishes.
      $(event.target).trigger({
        type: 'longKeyPress',
        key: event.key,
        keyCode: event.keyCode,
        which: event.which
      });
    }, duration);
  });
  
  $(document).on('keyup', function(event) {
    if(timer === null) return;
    
    // Clear running timer.
    window.clearTimeout(timer);
    timer = null;
  });
})();

// Application logic
(function() {
  // Bind to custom longKeyPress event.
  $('#channels-list-container').on('longKeyPress', function(event) {
    if(event.key === "Enter") {
      console.log('Long [Enter] key press detected on targeted element!');
    }
  });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="channels-list-container" type="text" />
0 голосов
/ 16 января 2019

Поскольку я пока не могу комментировать, я выложу свой ответ здесь. Как сказал человек в комментарии, вы можете запустить таймер при нажатии кнопки или при нажатии клавиши, затем при нажатии клавиши вверх остановите таймер и посмотрите, как долго он был нажат, если время соответствует ожидаемой вами длительности или больше, тогда Вы знаете, это был достаточно длинный пресс. После проверки вы можете очистить таймер.

...