How to detect when the user stops typing

Background

It is common to add keystroke events to input elements to detect when a user is typing such as keypress, keydown, and keyup. But sometimes, these alone are too granular for your needs. Imagine sending a Fetch request to your server to update a DB record after every keystroke!

With just a little bit of code, we can make handling user keystrokes more practical and more performant.

Practical applications

1. Implement an auto-save feature
2. Keep your local data store up-to-date
3. Synchronize the view with real-time collaborators

Here's what you're going to build

Let's define some basic variables

let timer,
    timeoutVal = 1000; // time it takes to wait for user to stop typing in ms

// pointers to our simple DOM elements
const status = document.getElementById('status');
const typer = document.getElementById('typer');

Add two separate event listeners on keypress and keyup

// detects when the user is actively typing
typer.addEventListener('keypress', handleKeyPress);
// triggers a check to see if the user is actually done typing
typer.addEventListener('keyup', handleKeyUp);

Create a timeout on keyup event

// when the user has stopped pressing on keys, set the timeout
// if the user presses on keys before the timeout is reached, then this timeout should be canceled via the keypress event
function handleKeyUp(e) {
  window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
  timer = window.setTimeout(() => {
  status.innerHTML = 'All done typing! Do stuff like save content to DB, send WebSocket message to server, etc.';
  }, timeoutVal);
}

Clear the timeout object on keypress

// when user is pressing down on keys, clear the timeout
// a keyup event always follows a keypress event so the timeout will be re-initiated there
function handleKeyPress(e) {
  window.clearTimeout(timer);
  status.innerHTML = 'Typing...';
}

That's it!

See how simple that was? Now you can make a more accurate determination on when the user has stopped typing and process data more intelligently.

Make it better - other things to think about!

1. How would you handle Backspace events?
2. How would you handle version control?

Follow me on Twitter https://twitter.com/eddieaich

Comments

[salmabader]

That's really what I'm looking for!

But when I applied the same code to a separate JavaScript file and linked it to HTML, it didn't work :(
Is there any plugins or library that should be included?

Thank you