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
- Implement an auto-save feature
- Keep your local data store up-to-date
- 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!
- How would you handle Backspace events?
- How would you handle version control?
Follow me on Twitter https://twitter.com/eddieaich
Top comments (1)
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