Question

我需要检测长按列表项上的Enter / OK键。我正在使用以下代码：

$("#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);
});

当焦点位于Caph-list项目上时，如何检测长按Enter / OK键？

Answer 1

由于我无法发表评论，因此将答案放在这里。正如该人在评论中所说，您可以在按下按钮或按下按钮时启动计时器，然后在按下键盘上的键停止计时器，并查看计时器已按下多长时间（如果时间在您期望的持续时间内或更长时间），你知道这已经足够长的时间了。检查后，您可以清除计时器。

Answer 2

正如@basic已经提到的那样，您需要某种机制来检测第一次keydown和keyup事件之间的时间。

下面的代码应为您提供如何实现此目的的示例。请记住，这只是一个示例，可能需要根据您的特定需求进行调整，但是它被设计为独立的通用功能；它与您的应用程序逻辑没有任何直接联系。

如果运行下面的代码示例，请聚焦输入字段，然后按Enter至少一秒钟，您应该会看到出现一个控制台日志条目，该条目检测到该事件。

// 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" />

检测长按清单上项目上的Enter / OK键

2 个答案: