Как отловить двойное нажатие клавиши в JavaScript? - PullRequest
10 голосов
/ 03 августа 2009

Я хотел бы иметь возможность перехватывать нажатие двойной клавиши (например, для Char T) для выполнения некоторой специальной обработки. Я хотел бы, чтобы нажатия клавиш происходили достаточно быстро, чтобы их не интерпретировали как два отдельных нажатия так же, как двойной щелчок. Есть идеи, как мне этого добиться?

Ответы [ 3 ]

19 голосов
/ 03 августа 2009

Когда нажата клавиша (и), запишите время. Затем сравните его со временем, которое вы отметили в последний раз раз, когда были нажаты эти клавиши.

Если разница находится в пределах вашего порога, считайте его двойным. В противном случае нет. Грубый пример:

var delta = 500;
var lastKeypressTime = 0;
function KeyHandler(event)
{
   if ( String.fromCharCode(event.charCode).toUpperCase()) == 'T' )
   {
      var thisKeypressTime = new Date();
      if ( thisKeypressTime - lastKeypressTime <= delta )
      {
        doDoubleKeypress();
        // optional - if we'd rather not detect a triple-press
        // as a second double-press, reset the timestamp
        thisKeypressTime = 0;
      }
      lastKeypressTime = thisKeypressTime;
   }
}
10 голосов
/ 03 августа 2009

Имейте переменную (возможно, first_press), которую вы устанавливаете в true, когда происходит событие нажатия клавиши, и запускайте таймер, который сбрасывает переменную в значение false через заданное время (как бы быстро вы не хотели, чтобы они нажимали клавиши ).

Если в вашем событии нажатия клавиши эта переменная имеет значение true, то вы дважды нажали.

Пример:

var first_press = false;
function key_press() {
    if(first_press) {
        // they have already clicked once, we have a double
        do_double_press();
        first_press = false;
    } else {
        // this is their first key press
        first_press = true;

        // if they don't click again in half a second, reset
        window.setTimeout(function() { first_press = false; }, 500);
    }
}
0 голосов
/ 05 апреля 2019

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

let pressed;
let lastPressed;
let isDoublePress;

const handleDoublePresss = key => {
    console.log(key.key, 'pressed two times');
}

const timeOut = () => setTimeout(() => isDoublePress = false, 500);

const keyPress = key => {
    pressed = key.keyCode;

    if (isDoublePress && pressed === lastPressed) {
        isDoublePress = false;
        handleDoublePresss(key);
    } else {
        isDoublePress = true;
        timeOut();
    }

    lastPressed = pressed;
}

window.onkeyup = key => keyPress(key);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...