【问题标题】:Differentiate between key pressed and key held区分按键和按住键
【发布时间】:2011-08-23 17:01:19
【问题描述】:

我有一个在按下“向下”键时运行的 javascript 函数。我想,如果按住“向下”键,该功能根本不会运行。

我考虑过 keydown 和 keyup 之间的时间,如果时间小于 1 秒,那么该函数将在 keyup 上运行。问题是,如果我按住键,浏览器会将其视为连续多次按下的键。

有没有更好的方法来做到这一点?

谢谢

【问题讨论】:

  • 上下文是什么?如果您在文本框中,在最后一次按键之前跟踪输入的值是否有意义,然后检查是否在下一个按键事件中添加了多个字符?只是钓鱼......
  • 您能否在第一个 keydown 事件触发时设置一个标志(例如布尔变量)(但如果它已经设置则不设置),并在keyup 触发时取消设置?

标签: javascript jquery keystroke


【解决方案1】:

有一个名为repeat 的键盘事件属性,如果按键被按住,则返回true。

document.addEventListener('keydown', (event) => {
  if(event.repeat) {
    // key is being held down
  } else {
    // key is being pressed
  }
});

【讨论】:

    【解决方案2】:

    我刚刚编写了这个小脚本,用于区分按下键和按下键 200 毫秒。也许你可以利用它:

    document.onkeydown = function(e){
        var keycode = window.event ? window.event.keyCode : e.which;
        if(keycode == 40){
            var timer = setTimeout(function(){
                alert('Down key held');
                document.onkeyup = function(){};
            }, 200); 
            document.onkeyup = function(){
                clearTimeout(timer);
                alert('Down key pressed');   
            }
        }
    };
    

    JSFiddle

    【讨论】:

      【解决方案3】:

      如果我理解您的问题是您的浏览器将一个键解释为多个 keydown 事件。 如果按住某个键而不是按下它,您希望发生一些不同的事情;并且您希望该差异基于您认为应该构成“持有”密钥的某个时间。 因此,您需要通过跟踪 keyup 事件来区分按住和按下。下面的伪代码可以解决这个问题:

      按键时:

      if !yourBool 
          start timer
      
      yourBool = true 
      

      在 Keyup 上:

      if timer < yourTime
          do something
      
      yourBool = false
      

      这会起作用,因为除非发生 keyup 事件,否则计时器不会重新启动。

      现在...如果您的浏览器将密钥保存解释为:
      Keydown, Keyup, Keydown, Keyup.......
      那么你对这种方法有问题。

      【讨论】:

        【解决方案4】:

        我遇到了类似的问题。我想捕获所有“第一个”keydown 事件,但如果它们是按下键的结果,则忽略连续事件。不确定这是否是您想要的,但这是一种方法:

        var repeat = false;
        el.addEventListener("keyup", function() { repeat = false; });
        el.addEventListener("keydown", function() {
          if (!repeat) {
            // Run your code.
            repeat = true;
          }
        });
        

        【讨论】:

          【解决方案5】:

          也许您可以在 keydown 上触发一个计数器,然后监听下一个 keyup。只要计数器超过 5 秒,或者您认为有多少时间,您就可以启动该功能。有意义吗?

          【讨论】:

            【解决方案6】:

            连续按键不会触发按键,因此可以区分它们。

            http://jsfiddle.net/pimvdb/xMFGQ/

            $('body').keydown(function() {
                if(!$(this).data('timeDown')) { // if not pressed yet, save time
                    $(this).data('timeDown', +new Date);
                }
            }).keyup(function() {
                var diff = new Date - $(this).data('timeDown'); // time difference
                if(diff < 1000) { // less than one second
                    alert(123);
                }
                $(this).data('timeDown', null); // reset time
            });
            

            【讨论】:

              【解决方案7】:

              浏览器看到该键被多次按下,但keydown事件仅在第一次按下时发生。

              您想要的是从 keydown 事件而不是 keypressed 开始计时。

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2012-01-03
                • 2014-08-02
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多