How to detect when the user stops typing in JavaScript

# Table of Contents

# How to detect when the user stops typing in JavaScript

To detect when the user stops typing in JavaScript:

Add a keyup event listener to the input field or textarea element.
Set up a timer that is triggered after N milliseconds using setTimeout().
Every time the user types, clear the timeout.
After N milliseconds have passed once the user stops typing, a function is invoked.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <input
      type="text"
      id="message"
      name="message"
      placeholder="Start typing..."
    />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
let timer;

const waitTime = 1000;

const messageInput = document.getElementById('message');

messageInput.addEventListener('keyup', event => {
  clearTimeout(timer);

  timer = setTimeout(() => {
    doneTyping(event.target.value);
  }, waitTime);
});

function doneTyping(value) {
  console.log(`The user is done typing: ${value}`);
}

The code for this article is available on GitHub

Here is a short clip that demonstrates how this works.

detect when user stops typing

We first declared timer and waitTime variables.

index.js

Copied!
let timer;

const waitTime = 1000;

The timer variable is later set to the return value of the setTimeout() method so we can clear the timer later on.

The waitTime variable stores the number of milliseconds you want to wait before calling the doneTyping() function.

We used the document.getElementById() method to select the input field by its ID.

index.js

Copied!
const messageInput = document.getElementById('message');

The next step is to add an event listener to the input field that listens for the keyup event.

The keyup event is triggered when a key is released.

index.js

Copied!
messageInput.addEventListener('keyup', event => {
  clearTimeout(timer);

  timer = setTimeout(() => {
    doneTyping(event.target.value);
  }, waitTime);
});

function doneTyping(value) {
  console.log(`The user is done typing: ${value}`);
}

The code for this article is available on GitHub

When the user releases a key, we clear the timeout.
We then set the timeout to run the doneTyping function after N milliseconds.
If the user presses and releases another key, the event handler function is invoked again, clears the timeout and sets it again.

If the user doesn't press another key for waitTime milliseconds, then the doneTyping function is invoked with the value of the input field.

The event.target property refers to the input field, so the event.target.value property returns the value of the input element.

# Displaying a message when the user is done typing

Here is another example that uses the same approach to:

Display a message when the user is typing.
Display a different message when the user is done typing.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <input
      type="text"
      id="message"
      name="message"
      placeholder="Start typing..."
      autocomplete="off"
    />

    <h2 id="status"></h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
let timer;

let waitTime = 1000;

const messageInput = document.getElementById('message');

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

messageInput.addEventListener('keyup', event => {
  clearTimeout(timer);

  statusElement.innerHTML = 'The user is typing...';

  timer = setTimeout(() => {
    doneTyping(event.target.value);
  }, waitTime);
});

function doneTyping(value) {
  console.log(`The user is done typing: ${value}`);

  statusElement.innerHTML = `The user is done typing ${value}`;
}

display message when user is done typing

The code for this article is available on GitHub

We used the document.getElementById() method to select the h2 element that we'll use to display the status.

index.js

Copied!
const statusElement = document.getElementById('status');

In our keyup event handler function, we set the innerHTML property of h2 element to indicate that the user is typing.

index.js

Copied!
messageInput.addEventListener('keyup', event => {
  clearTimeout(timer);

  statusElement.innerHTML = 'The user is typing...';

  timer = setTimeout(() => {
    doneTyping(event.target.value);
  }, waitTime);
});

function doneTyping(value) {
  console.log(`The user is done typing: ${value}`);

  statusElement.innerHTML = `The user is done typing ${value}`;
}

The code for this article is available on GitHub

When the user stops typing, the doneTyping() function is invoked, where we set the innerHTML of the h2 element to indicate that the user has stopped typing.

# Using a debounce function to detect when the user stops typing

You can also use a custom debounce function to detect when the user stops typing.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <input
      type="text"
      id="message"
      name="message"
      placeholder="Start typing..."
      autocomplete="off"
    />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
let waitTime = 1000;

const messageInput = document.getElementById('message');

messageInput.addEventListener(
  'keyup',
  debounce(() => {
    doneTyping(messageInput.value);
  }, waitTime),
);

function doneTyping(value) {
  console.log(`The user is done typing: ${value}`);
}

function debounce(callback, waitTimeMS) {
  let timer;

  return (...args) => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      callback(...args);
    }, waitTimeMS);
  };
}

detect when user stops typing with debounce

The code for this article is available on GitHub

The debounce() function takes a callback function and the delay in milliseconds before calling the callback function.

We passed the result of calling debounce as the second argument to the addEventListener() method.

The debounce() function returns another function.

index.js

Copied!
return (...args) => {
  clearTimeout(timer);

  timer = setTimeout(() => {
    callback(...args);
  }, waitTimeMS);
};

The inner function clears the timeout every time it is called (every time the user releases a key) and sets up a timer.

If the user stops typing for waitTimeMS, then the callback() function is invoked.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to detect when the user stops typing in JavaScript

# Table of Contents