4

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?

crazypeter
  • 1,279
  • 1
  • 10
  • 14
  • See [this](https://stackoverflow.com/questions/9374915/javascript-detect-ctrl-key-pressed-or-up-keypress-event-doesnt-trigger). Add some conditions in resetTimeout function. – step Nov 15 '19 at 06:36
  • How can it detect `alt` if `keydown` as they are different events – Ashish Kamble Nov 15 '19 at 06:37
  • You can detect event type. See https://developer.mozilla.org/en-US/docs/Web/API/Event/type. – step Nov 15 '19 at 06:38
  • Conditions like "ignore if `e.shiftKey`" do not work, as it will also ignore, e.g., shift+a. – crazypeter Nov 15 '19 at 06:43

4 Answers4

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.key includes Left or Right for modifier keys, e.g. args.key contains LeftShift while args.code contains just Shift.

Steven Liekens
  • 13,266
  • 8
  • 59
  • 85
  • 1
    To include 'Backspace' and 'Escape' (etc) but not 'Alt' or 'Control' (etc), you might use `args.key.length === 1 && args.key === args.code`. This works because modifiers like 'Alt' include 'Left' or 'Right' in their args.key but not in their args.code, but action keys seem to all match exactly. – mikeypie Jul 18 '23 at 00:57
2

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

let excludedKeys = ["Alt"];
window.addEventListener('keydown', e => {
  if(!excludedKeys.includes(e.key)) resetTimeout();
});
Klaycon
  • 10,599
  • 18
  • 35
Szymek
  • 163
  • 1
  • 9
1

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>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • That solution also ignores, e.g., 'Shift+A', which is a legitimate key to reset the timeout. I guess just having the `ignoreKeys` array and checking for it works (without the `ignore` state). I'm just surprised how expensive all these solutions are compared to what `onkeypress` had to offer, without ANY additional work. – crazypeter Nov 15 '19 at 18:42
-2

Add function and check for the command 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();
      }
    });
Sandeep Kokate
  • 825
  • 4
  • 16