Run javascript function when user finishes typing instead of on key up

Question

I want to trigger an ajax request when the user has finished typing in a text box  I don t want it to run the function on every time the user types a letter because that would result in A LOT of ajax requests  however I don t want them to have to hit the enter button either   Is there a way so I can detect when the user has finished typing and then do the ajax request   Using jQuery here  Dave

User · Answer

You guys have heard of closures in javascript ?!

it's very simple and straightforward just compare you current input value with the old value that the setTimeOut function closes over, and voila, you're done.

let timer;
$('#myInput').on('keyup', function() {
  window.clearTimeout(timer);
  // here is the closures javascript magic happens.
  const value = $(this).val();
  timer = setTimeout(() => {
    if(value === $(this).val() && $(this).val()!== ''){
        alert($(this).val());
    }
  }, 500);
})

User · Answer

Declare the following delay function   var delay    function          var timer   0      return function  callback  ms            clearTimeout timer           timer   setTimeout callback  ms                 and then use it   let  filter       item-filter     filter on  keydown   function          delay function                          console log  this will hit  once user has not typed for 1 second                       1000

User · Answer

Late answer but I m adding it because it s 2019 and this is entirely achievable using pretty ES6  no third party libraries  and I find most of the highly rated answers are bulky and weighed down with too many variables  Elegant solution taken from this excellent blog post  function debounce callback  wait      let timeout    return     args    gt          clearTimeout timeout         timeout   setTimeout function      callback apply this  args      wait           window addEventListener  keyup   debounce       gt           code you would like to run 1000ms after the keyup event has stopped firing        further keyup events reset the timer  as expected    1000

User · Answer

This is the a simple JS code I wrote    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

agree with the  going  s answer  Another similar solution that worked for me is the one below  The only difference is that I am using  on  input      instead of keyup  This only captures changes in the input  other keys like Ctrl  Shift etc  are ignored  var typingTimer                   timer identifier var doneTypingInterval   5000     time in ms  5 seconds     on input change  start the countdown      myInput   on  input   function             clearTimeout typingTimer       typingTimer   setTimeout function               doSomething           doneTypingInterval

User · Answer

Not sure if my needs are just kind of weird  but I needed something similar to this and this is what I ended up using      input update   bind  sync   function         clearTimeout   this  data  timer                       post   this  attr  data-url     value    this  val     function x            if x success    true                triggerError x message                         json       keyup function         clearTimeout   this  data  timer         var val     trim   this  val         if val            var  this     this           var timer   setTimeout function                  this trigger  sync               2000             this  data  timer   timer            blur function         clearTimeout   this  data  timer                this  trigger  sync          Which allows me to have elements like this in my application    lt input type  text  data-url   controller action   class  update  gt    Which get updated when the user is  done typing   no action for 2 seconds  or goes to another field  blurs out of the element

User · Answer

So  I m going to guess finish typing means you just stop for a while  say 5 seconds   So with that in mind  lets start a timer when the user releases a key and clear it when they press one   I decided the input in question will be  myInput   Making a few assumptions       setup before functions var typingTimer                   timer identifier var doneTypingInterval   5000     time in ms  5 second for example var  input       myInput       on keyup  start the countdown  input on  keyup   function        clearTimeout typingTimer     typingTimer   setTimeout doneTyping  doneTypingInterval          on keydown  clear the countdown   input on  keydown   function        clearTimeout typingTimer          user is  finished typing   do something function doneTyping          do something

User · Answer

Both top 2 answers doesn t work for me  So  here is my solution   var timeout   null       myInput   keyup function         clearTimeout timeout        timeout   setTimeout function               do stuff here        500

User · Answer

Wow  even 3 comments are pretty correct     Empty input is not a reason to skip function call  e g  I remove waste parameter from url before redirect   on   input   function             should be used to trigger keyup  paste and change events  definitely  val   or  value must be used  You can use   this  inside event function instead of  id to work with multiple inputs   my decision  I use anonymous function instead of doneTyping in setTimeout to easily access   this  from n 4  but you need to save it first like var  currentInput     this     EDIT I see that some people don t understand directions without the possibility to copy-paste ready code  Here you re  var typingTimer                      2     myinput   on  input   function                         4     3     var input     this  val        clearTimeout typingTimer                                    5     typingTimer   setTimeout function                do something with input         alert input          5000

User · Answer

I was implementing the search at my listing and needed it to be ajax based  That means that on every key change  searched results should be updated and displayed   This results in so many ajax calls sent to server  which is not a good thing    After some working  I made an approach to ping the server when the user stops typing   This solution worked for me     document  ready function             yourtextfield   keyup function             s       yourtextfield   val            setTimeout function                  if     yourtextfield   val      s      Check the value searched is the latest one or not  This will help in making the ajax call work when client stops writing                    ajax                       type   POST                       url   yoururl                       data   search     s                      cache  false                      beforeSend  function                               loading image                                            success  function data                               Your response will come here                                                                   1000      1 sec delay to check             End of  keyup function        End of document ready   You will notice that there is no need to use any timer while implementing this

User · Answer

It s just one line with underscore js debounce function       my-input-box   keyup   debounce doSomething   500      This basically says doSomething 500 milliseconds after I stop typing   For more info  http   underscorejs org  debounce

User · Answer

The chosen answer above does not work   Because typingTimer is occassionaly set multiple times  keyup pressed twice before keydown is triggered for fast typers etc   then it doesn t clear properly   The solution below solves this problem and will call X seconds after finished as the OP requested  It also no longer requires the redundant keydown function  I have also added a check so that your function call won t happen if your input is empty     setup before functions var typingTimer                   timer identifier var doneTypingInterval   5000     time in ms  5 seconds     on keyup  start the countdown     myInput   keyup function        clearTimeout typingTimer       if      myInput   val              typingTimer   setTimeout doneTyping  doneTypingInterval                user is  finished typing   do something function doneTyping            do something     And the same code in vanilla JavaScript solution     setup before functions let typingTimer                   timer identifier let doneTypingInterval   5000     time in ms  5 seconds  let myInput   document getElementById  myInput       on keyup  start the countdown myInput addEventListener  keyup        gt        clearTimeout typingTimer       if  myInput value            typingTimer   setTimeout doneTyping  doneTypingInterval                user is  finished typing   do something function doneTyping            do something     This solution does use ES6 but it s not necessary here  Just replace let with var and the arrow function with a regular function

User · Answer

Multiple timers per page  All the other answers only work for one control  my other answer included   If you have multiple controls per page  e g  in a shopping cart  only the last control where the user typed something will get called  In my case this is certainly not the wished behaviour - each control should have its own timer   To solve this  you simply have to pass an ID to the function and maintain a timeoutHandles dictionary as in the following code   Function Declaration   var delayUserInput    function          var timeoutHandles               return function  id  callback  ms                    if  timeoutHandles id                 clearTimeout timeoutHandles id                       timeoutHandles id    setTimeout callback  ms                               Function Usage     delayUserInput  yourID   function             do some stuff      1000

User · Answer

If you need wait until user is finished with typing use simple this     document  on  change    PageSize   function            Do something after new value in  PageSize              Complete Example with ajax call - this working for my pager - count of item per list     document  ready function            document  on  change    PageSize   function  e            e preventDefault            var page   1          var pagesize       PageSize   val            var q       q   val              ajax               url    Url Action  IndexAjax    Materials   new   Area    TenantManage                   data    q  q  pagesize  pagesize  page  page                type   post               datatype   json               success  function  data                        tablecontainer   html data                     toastr success  Pager has been changed    Success                                error  function  jqXHR  exception                    ShowErrorMessage jqXHR  exception

User · Answer

You can use the onblur event to detect when the textbox loses focus  https   developer mozilla org en DOM element onblur  That s not the same as  stops typing   if you care about the case where the user types a bunch of stuff and then sits there with the textbox still focused   For that I would suggest tying a setTimeout to the onclick event  and assuming that after x amount of time with no keystrokes  the user has stopped typing

User · Answer

Not a direct answer bu if someone looking for an AngularJS solution  I wrote a directive according to the popular solutions here   app directive  quot ngTypeEnds quot     quot  timeout quot   function   timeout        return function  scope  element  attrs            var typingTimer                         element bind  quot keyup quot   function  event                if  typingTimer                   timeout cancel typingTimer               if  angular element element  0  value                    typingTimer    timeout function                          scope  apply function                              scope  eval attrs ngTypeEnds                                              500                             event preventDefault

User · Answer

If there is necessity for the user to move away from the field  we can use  onBlur  instead of Onchange in Javascript     lt TextField id  outlined-basic   variant  outlined  defaultValue  CardValue  onBlur  cardTitleFn    gt    If that is not necessary setting timer would be the good option

User · Answer

var timer  var timeout   1000       in   keyup function        clearTimeout timer       if      in   val            timer   setTimeout function                  do stuff here e g ajax call etc                  var v       in   val                     out   html v              timeout               full example here  http   jsfiddle net ZYXp4 8

User · Answer

Well  strictly speaking no  as the computer cannot guess when the user has finished typing  You could of course fire a timer on key up  and reset it on every subsequent key up  If the timer expires  the user hasn t typed for the timer duration - you could call that  finished typing    If you expect users to make pauses while typing  there s no way to know when they are done    Unless of course you can tell from the data when they are done

User · Answer

I don t think keyDown event is necessary in this case  please tell me why if I m wrong   In my  non-jquery  script similar solution looks like that   var  timer   timeOut   2000      function  onKeyUp e        clearTimeout  timer       if  e keyCode    13            close on ENTER key          onCloseClick          else                         send xhr requests          timer   window setTimeout function                  onInputChange                timeOut             It s my first reply on Stack Overflow  so I hope this helps someone  someday

User · Answer

Yes  you can set a timeout of say 2 seconds on each and every key up event which will fire an ajax request  You can also store the XHR method and abort it on subsequent key press events so that you save bandwith even more  Here s something I ve written for an autocomplete script of mine   var timer  var x       some-input   keyup function          if  x    x abort        If there is an existing XHR  abort it      clearTimeout timer      Clear the timer so we don t end up with dupes      timer   setTimeout function        assign timer a new timeout          x     getJSON          run ajax request and store in x variable  so we can cancel         2000      2000ms delay  tweak for faster slower       Hope this helps   Marko

User · Answer

If you are looking for a specific length  such as a zipcode field       input   live  keyup   function  event    if this value length    this getAttribute  maxlength                make ajax request here after

User · Answer

Modifying the accepted answer to handle additional cases such as paste     setup before functions var typingTimer                   timer identifier var doneTypingInterval   2000     time in ms  2 second for example var  input       myInput        updated events   input on  input propertychange paste   function          clearTimeout typingTimer       typingTimer   setTimeout doneTyping  doneTypingInterval                user is  finished typing   do something function doneTyping          do something

User · Answer

I feel like the solution is somewhat a bit simpler with the input event   var typingTimer  var doneTypingInterval   500       myInput   on  input   function          window clearTimeout typingTimer       typingTimer   window setTimeout doneTyping  doneTypingInterval        function doneTyping             code here

User · Answer

I just figured out a simple code to wait for user to finish typing   step 1 set time out to null then clear the current timeout when the user is typing   step 2 trigger clear timeout to the variable define before keyup event is triggered   step 3 define timeout to the variable declared above    lt input type  text  id  input  placeholder  please type  style  padding-left 20px    gt   lt div class  data  gt  lt  div gt    javascript code  var textInput   document getElementById  input    var textdata   document querySelector   data       Init a timeout variable to be used below var timefired   null      Listen for keystroke events    Init a timeout variable to be used below var timefired   null    Listen for keystroke events textInput onkeyup   function  event    clearTimeout timefired   timefired   setTimeout function          textdata innerHTML    Input Value    textInput value       600

User · Answer

For passing parameters to your function along with ES6 syntax     document  ready      gt        let timer   null           classSelector   keydown      gt         clearTimeout timer         timer   setTimeout      gt  foo  params    500              const foo    params    gt      console log  In foo   params

User · Answer

I like Surreal Dream s answer but I found that my  doneTyping  function would fire for every keypress  i e  if you type  Hello  really quickly  instead of firing just once when you stop typing  the function would fire 5 times   The problem was that the javascript setTimeout function doesn t appear to overwrite or kill the any old timeouts that have been set  but if you do it yourself it works  So I just added a clearTimeout call just before the setTimeout if the typingTimer is set  See below     setup before functions var typingTimer                   timer identifier var doneTypingInterval   5000     time in ms  5 second for example    on keyup  start the countdown     myInput   on  keyup   function        if  typingTimer  clearTimeout typingTimer                      Clear if already set          typingTimer   setTimeout doneTyping  doneTypingInterval          on keydown  clear the countdown      myInput   on  keydown   function        clearTimeout typingTimer          user is  finished typing   do something function doneTyping            do something     N B  I would have liked to have just added this as a comment to Surreal Dream s answer but I m a new user and don t have enough reputation  Sorry

User · Answer

Simple and easy to understand   var mySearchTimeout      ctl00 mainContent CaseSearch   keyup function         clearTimeout mySearchTimeout      var filter     this  val       mySearchTimeout   setTimeout function      myAjaxCall filter      700      return true

User · Answer

Why not just use onfocusout   https   www w3schools com jsreF event onfocusout asp   If it s a form  they will always leave focus of every input field in order to click the submit button so you know no input will miss out on getting its onfocusout event handler called

User · Answer

Once you detect focus on the text box  on key up do a timeout check  and reset it each time it s triggered   When the timeout completes  do your ajax request

[javascript] Run javascript function when user finishes typing instead of on key up?

Examples related to javascript

Examples related to jquery

Examples related to keyboard