Detect When a User Stops Typing in Text Fields – debounced-input-listener

debounced-input-listener is a tiny JavaScript utility that detects when a user stops typing in text fields with built-in debouncing. Supports both input field and textarea.

It can be used to know precisely when a user has finished typing, so you can trigger actions like search queries, validation, or auto-saving without hammering your server with requests after every keystroke.

Features:

• You can specify exactly how long to wait after the last keypress before firing your callback.
• Attach the listener to several inputs at once using a single CSS selector.
•  The library returns a function to remove event listeners. This is critical for preventing memory leaks in single-page applications.
• Useful options like setting a minimum character count (minChars) and preventing the callback from firing if the input value hasn’t changed.
• It includes pre-built helpers for common tasks like live search, input validation, and auto-saving.

How to Use It:

1. Install debounced-input-listener through npm for modern JavaScript projects:

npm install debounced-input-listener

2. For browser-based implementations without a build system, you can import the module directly:

<script type="module">
  import { attachDebouncedInputListener } from './index.js';
</script>

3. Create an input field in your HTML.

<input id="example" placeholder="Enter..." />

4. You can now attach the listener in your JavaScript. The core function attachDebouncedInputListener requires three parameters: a CSS selector, a callback function, and optional configuration settings.

//  Basic usage with default 500ms delay
attachDebouncedInputListener('#example', (e) => {
  console.log('User finished typing');
});
// Custom delay configuration
attachDebouncedInputListener('.form-input', (e) => {
  // do something
}, { delay: 750 });

5.  More configuration options.

• delay: number – The time in milliseconds to wait after the last keypress. Defaults to 500.
• eventType: string – The DOM event to listen for. Defaults to 'input'.
• minChars: number – The minimum number of characters required to trigger the callback. Defaults to 0.
• trim: boolean – If true, trims whitespace from the input’s value before checking minChars or preventDuplicates. Defaults to false.
• preventDuplicates: boolean – If true, the callback will not run if the new value is identical to the last value that triggered the callback. Defaults to false.

attachDebouncedInputListener('.form-input', (event) => {
validateInput(event.target.value);
}, { 
  delay: 500,
  eventType: 'input',
  minChars: 0,
  trim: false,
  preventDuplicates: false,
  immediate: false,
});

6. The function returns a cleanup method that removes all attached event listeners. This prevents memory leaks in single-page applications or dynamic content scenarios:

const cleanupFunction = attachDebouncedInputListener('#xample', handleInput);
// Later, when removing elements or changing views
cleanupFunction();