javascript - Detecting a key press ignoring modifier keys - Stack Overflow

admin管理员组

文章数量:1434380

I am implementing an idle timeout functionality for my website. I want to reset the idle timeout whenever the user interacts with the page, which I want to implement as "the user clicks anywhere on the page" or "the user types a key".

The following code works:

window.addEventListener('click', resetTimeout);
window.addEventListener('keydown', resetTimeout);

Unfortunately it detects modifier keys (alt, shift, ctrl, meta). I don't want to reset the timeout in these cases. For example, when the user alt+tab's to another window, the alt key resets the timeout.

An alternative to keydown is keypress, however, it is marked as deprecated. Is there an alternative for keypress, specifically for the situation I am describing?

I am implementing an idle timeout functionality for my website. I want to reset the idle timeout whenever the user interacts with the page, which I want to implement as "the user clicks anywhere on the page" or "the user types a key".

The following code works:

window.addEventListener('click', resetTimeout);
window.addEventListener('keydown', resetTimeout);

Unfortunately it detects modifier keys (alt, shift, ctrl, meta). I don't want to reset the timeout in these cases. For example, when the user alt+tab's to another window, the alt key resets the timeout.

An alternative to keydown is keypress, however, it is marked as deprecated. Is there an alternative for keypress, specifically for the situation I am describing?

• javascript

Share Improve this question Follow asked Nov 15, 2019 at 6:32 crazypetercrazypeter 1,45911 gold badge1212 silver badges1414 bronze badges 4

• See this. Add some conditions in resetTimeout function. – step Commented Nov 15, 2019 at 6:36
• How can it detect alt if keydown as they are different events – Ashish Kamble Commented Nov 15, 2019 at 6:37
• You can detect event type. See developer.mozilla/en-US/docs/Web/API/Event/type. – step Commented Nov 15, 2019 at 6:38
• Conditions like "ignore if e.shiftKey" do not work, as it will also ignore, e.g., shift+a. – crazypeter Commented Nov 15, 2019 at 6:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I came here looking for an answer but was not happy with having to maintain a list of exclusions so I solved this by checking the length of the key name.

window.addEventListener('keydown', resetTimeout);

function resetTimeout(args) {
    if (args.key.length === 1) {
        // 'a', 'A', '1', '.', '%' etc
    } else {
        // 'Alt', 'Control', 'Shift', 'Escape', 'Backspace' etc
    }
}

You can also use the next trick to isolate modifier keys from any other key. Thanks to @mikeypie for the suggestion.

function resetTimeout(args) {
    if (args.key.length === 1 || args.key === args.code) {
        // 'a', 'A', '1', '.', '%', 'Escape', 'Backspace' etc
    } else {
        // 'Alt', 'Control', 'Shift'
    }
}

This works because the args.code includes Left or Right for modifier keys,

e.g. when left Shift is pressed:

• args.key: "Shift"
• args.code: "ShiftLeft"

note to excludedKeys you can add all keys you don't want. You can search for them here: https://www.w3/TR/uievents-key/

let excludedKeys = ["Alt"];
window.addEventListener('keydown', e => {
  if(!excludedKeys.includes(e.key)) resetTimeout();
});

You'd need a variable to keep a true/false which tells you whether an ignored key is being held down, and if it is, then you can ignore all keydown events which would reset your timer. When your ignored key is released, you can then listen for keydown events.

Here is a small demo:

const display = document.getElementById('status');

let idleTime = 0;
const timer_cb = _ => {
  if(idleTime > 5) {
    display.innerText = "You are now idle";
    clearInterval(timer);
  } else {
    display.innerText = "You have been inactive for: " + idleTime +" seconds";
    idleTime++;
  }
}

let timer = setInterval(timer_cb, 1000);

const ignoreKeys = new Set(['Meta', 'Control', 'Shift', 'Alt']);
let ignore = false;

const resetTimeout = ({key}) => {
  ignore = ignore || ignoreKeys.has(key);
  if(!ignore) {
    idleTime = 0;
    timer_cb();
    clearInterval(timer);
    timer = setInterval(timer_cb, 1000);
  }
};

const acknowledge = ({key}) => {
  ignore = !!(ignore ^ ignoreKeys.has(key));
}

window.addEventListener('click', resetTimeout);
window.addEventListener('keydown', resetTimeout);
window.addEventListener('keyup', acknowledge);
timer_cb();

<span id="status"></span>

Add function and check for the mand keys as follow:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.keyCode; //You can also use event.key to get the text value. e.g. "Alt", "Ctrl"
  if(key != 17 && key != 18) //Alt and Ctrl keys. key should not 17 as well as 18 then resetTimeOut.
  {
       resetTimeout();
  }
});

If you want to use .key then you can use string and check the pressed key is present in that string or not.

document.addEventListener("keydown", function(event) {
      event.preventDefault();
      const key = event.key
      if(! "Alt,Control,Tab".split(",").includes(key))
      {
           resetTimeout();
      }
    });

本文标签： javascriptDetecting a key press ignoring modifier keysStack Overflow