[TypeWatch] jQuery Plugin to Determine When a User Stops Typing in a Text Field

TypeWatch calls a function when a user types text in the input, a text area, and div changes from editors (including HTML 5 input types) after the user has stopped typing for a specified period of time.

Note * This is not an OnChange event, instead, the function is called after the user has finished typing (or if the user has stopped typing for #ms) even if the focus remains on the input.

This can be used in conjunction with an autocomplete implementation, so instead of firing an AJAX call every 500 milliseconds, you can fire it once when they stop typing.

HTML 5 is now supported in the input event for browsers that support it.

How to make use of it:

1. First you must load the jQuery type watch plugin after the jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.typewatch.js"></script>

2. Call the perform on the text fields and specify the motion after the user has stopped typing.

$('input,textarea').typeWatch({
  callback: function(value) {
    // do something
  }
});

3. Config the plugin to set off the function after a timeout.

$('input,textarea').typeWatch({
  wait: 750, // 750ms
  callback: function(value) {
    // do something
  }
});

4. Highlights the component when it receives focus.

$('input,textarea').typeWatch({
  wait: 750, // 750ms
  highlight: true,
  callback: function(value) {
    // do something
  }
});

5. Specify the minimal # of characters essential to trigger the function.

$('input,textarea').typeWatch({
  wait: 750, // 750ms
  highlight: true,
  captureLength: 2
  callback: function(value) {
    // do something
  }
});

Run A Function When User Stops Typing, TypeWatch jQuery plugin/Github, jquery debounce keyup, jquery keyup after 2 seconds


See Demo And Download

Official Website(dennyferra): Click Here

This superior jQuery/javascript plugin is developed by dennyferra. For extra Advanced Usage, please go to the official website.

Related Posts

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

swiper-touch-slider

Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…

jquery-steps-plugin

[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

VenoBox-Responsive-jQuery-Lightbox-Plugin

Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Mobile-App-Sliding-Menu-mmenu

Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

Your email address will not be published. Required fields are marked *