How to trigger an event in input text after I stop typing writing

Question

I want to trigger an event just after I stop typing  not while typing  characters in my input textbox   I ve tried with      input username   keypress function         var  this     this      copy of this object for further usage      setTimeout function               post   ajax fetch                 type   username               value   this val              function data                if  data success                       continue working               else                      throw an error                           json           3000         But this example produces a timeout for every typed character and I get about 20 AJAX requests if I type-in 20 characters   On this fiddle I demonstrate the same problem with a simple alert instead of an AJAX   Is there a solution for this or I m just using a bad approach for this

User · Answer

We can use useDebouncedCallback to perform this task in react  import   useDebouncedCallback   from  use-debounce   - install npm packge for same if not installed const  searchText  setSearchText    useState       const onSearchTextChange   value   gt        setSearchText value           call search api   const  debouncedOnSearch    useDebouncedCallback searchIssues  500     useEffect      gt        debouncedOnSearch searchText         searchText  debouncedOnSearch

User · Answer

You should assign setTimeout to a variable and use clearTimeout to clear it on keypress  var timer           input username   keypress function       clearTimeout timer     timer   setTimeout function           Your code here      3000     Waits for 3 seconds after last keypress to execute the above lines of code      Fiddle Hope this helps

User · Answer

In my thinking a user stops writing when he doesn t keep focus on that input  For this you have a function called  blur  which does stuff like

User · Answer

You need debounce   Here is a jQuery plugin  and here is all you need to know about debounce  If you are coming here from Google and Underscore has found its way into the JSoup of your app  it has debounce baked right in

User · Answer

why do that much when you just want to reset a clock    var clockResetIndex   0      this is the input we are tracking var tarGetInput      input username     tarGetInput on   keyup keypress paste        gt          reset any privious clock      if  clockResetIndex     0  clearTimeout clockResetIndex           set a new clock   timeout       clockResetIndex   setTimeout      gt               your code goes here           console log  new Date     tarGetInput val           1000         if you are working on wordpress   then you need to wrap all this code inside an jQuery block    jQuery document  ready       gt                    name  navSearch           version 1 0        Created on  2018-08-28 17 59 31        GMT 0530  India Standard Time          author               description                      var clockResetIndex   0              this is the input we are tracking         var tarGetInput      input username             tarGetInput on   keyup keypress paste        gt                  reset any privious clock              if  clockResetIndex     0  clearTimeout clockResetIndex                   set a new clock   timeout               clockResetIndex   setTimeout      gt                       your code goes here                   console log  new Date     tarGetInput val                   1000

User · Answer

Use the attribute onkeyup  myFunction    in the  lt input gt  of your html

User · Answer

I ve been searching for a simple HTML JS code and I did not found any  Then  I wrote the code below using onkeyup  DelayedSubmission       lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  pt-br  lang  pt-br  gt   lt head gt  lt title gt Submit after typing finished lt  title gt   lt script language  javascript  type  text javascript  gt  function DelayedSubmission         var date   new Date        initial time   date getTime        if  typeof setInverval Variable     undefined                 setInverval Variable   setInterval DelayedSubmission Check  50            function DelayedSubmission Check         var date   new Date        check time   date getTime        var limit ms check time-initial time      if  limit ms  gt  800      Change value in milliseconds         alert  insert your function      Insert your function         clearInterval setInverval Variable           delete setInverval Variable            lt  script gt   lt  head gt   lt body gt    lt input type  search  onkeyup  DelayedSubmission    id  field id  style  WIDTH  100px  HEIGHT  25px     gt    lt  body gt   lt  html gt

User · Answer

You can use underscore js  debounce      input username   keypress    debounce  function    lt your ajax call here gt    500        This means that your function call will execute after 500ms of pressing a key  But if you press another key  another keypress event is fired  before the 500ms  the previous function execution will be ignored  debounced  and the new one will execute after a fresh 500ms timer   For extra info  using   debounce func timer true  would mean that the first function will execute and all other keypress events withing subsequent 500ms timers would be ignored

User · Answer

cleaned solution      fn donetyping   function callback  delay     delay     delay   1000     var timeoutReference    var doneTyping   function elt       if   timeoutReference  return      timeoutReference   null      callback elt           this each function        var self     this       self on  keyup  function          if timeoutReference  clearTimeout timeoutReference         timeoutReference   setTimeout function            doneTyping self            delay          on  blur  function          doneTyping self                    return this

User · Answer

There is some simple plugin I ve made that does exacly that  It requires much less code than proposed solutions and it s very light   0 6kb   First you create Bid object than can be bumped anytime  Every bump will delay firing Bid callback for next given ammount of time   var searchBid   new Bid function inputValue         your action when user will stop writing for 200ms       yourSpecialAction inputValue      200     we set delay time of every bump to 200ms   When Bid object is ready  we need to bump it somehow  Let s attach bumping to keyup event      input   keyup function        searchBid bump    this  val        parameters passed to bump will be accessable in Bid callback         What happens here is   Everytime user presses key  bid is  delayed   bumped  for next 200ms  If 200ms will pass without beeing  bumped  again  callback will be fired   Also  you ve got 2 additional functions for stopping bid  if user pressed esc or clicked outside input for example  and for finishing and firing callback immediately  for example when user press enter key    searchBid stop    searchBid finish valueToPass

User · Answer

You ll have to use a setTimeout  like you are  but also store the reference so you can keep resetting the limit  Something like    x000D   x000D     x000D         element   donetyping callback   timeout 1000   x000D     Fires callback when a user has finished typing  This is determined by the time elapsed x000D     since the last keystroke and timeout parameter or the blur event--whichever comes first  x000D        callback  function to be called when even triggers x000D        timeout    default 1000  timeout  in ms  to to wait before triggering event if not x000D                  caused by blur  x000D     Requires jQuery 1 7  x000D     x000D    function     x000D        fn extend   x000D          donetyping  function callback timeout   x000D              timeout   timeout    1e3     1 second default timeout x000D              var timeoutReference  x000D                  doneTyping   function el   x000D                      if   timeoutReference  return  x000D                      timeoutReference   null  x000D                      callback call el   x000D                     x000D              return this each function i el   x000D                  var  el     el   x000D                     Chrome Fix  Use keyup over keypress to detect backspace  x000D                     thank you  palerdot x000D                   el is   input    amp  amp   el on  keyup keypress paste  function e   x000D                         This catches the backspace button in chrome  but also prevents x000D                         the event from triggering too preemptively  Without this line  x000D                         using tab shift tab will make the focused element fire the callback  x000D                      if  e type   keyup   amp  amp  e keyCode  8  return  x000D                       x000D                         Check if timeout has been set  If it has   reset  the clock and x000D                         start over again  x000D                      if  timeoutReference  clearTimeout timeoutReference   x000D                      timeoutReference   setTimeout function    x000D                             if we made it here  our timeout has elapsed  Fire the x000D                             callback x000D                          doneTyping el   x000D                         timeout   x000D                     on  blur  function    x000D                         If we can  fire the event since we re leaving the field x000D                      doneTyping el   x000D                      x000D                  x000D            x000D          x000D     jQuery   x000D   x000D      example   donetyping function    x000D        example-output   text  Event last fired        new Date   toUTCString      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  text  id  example    gt  x000D   lt p id  example-output  gt Nothing yet lt  p gt  x000D   x000D   x000D    That will execute when    The timeout has elapsed  or The user switched fields  blur event     Whichever comes first

User · Answer

SOLUTION   Here is the solution  Executing a function after the user has stopped typing for a specified amount of time   var delay    function      var timer   0    return function callback  ms     clearTimeout  timer     timer   setTimeout callback  ms               Usage     input   keyup function       delay function        alert  Hi  func called         1000

[jquery] How to trigger an event in input text after I stop typing/writing?

We can use useDebouncedCallback to perform this task in react.

Examples related to jquery

Examples related to timeout

Examples related to keypress

Examples related to typeahead

Examples related to debouncing