Delay JavaScript input events for multiple interactions

If you have a feature that filters data, or even hits a live API, after the user inputs some text you may want to throttle the event, ideally adding a delay so it only triggers the event once. I guess in layman’s terms we are making the event wait for the user to finish typing.

It can be very easily fixed by assigning a setTimeout method to a variable and then clearing the setTimeout if the event fires again, that way it will continually overwrite itself until the user stops. Here’s a quick fiddle to demonstrate the technique.

Textarea maxlength and jQuery

It’s just another one of those html4 oversights – textareas do not support the maxlength attribute! It’s frustrating as it’s often requested and can cause problems when people paste in huge amounts of data and submit it to your server but it’s easily fixed with JavaScript.

Using jQuery you can easily delegate events to each textarea and catch each user input, shortening it once it’s past the maximum value.

Here’s a quick fiddle to demonstrate:

Thankfully html5 now fully supports the maxlength attribute and this issue will soon be a thing of the past!