Detect when user start / stop input in jquery

Question

As soon as I was looking for a solution to my problem, and my problem was "I want to determine when the user is printing and when he stops printing to update the status."

I created a sample. Let it work for you.

var typingTimer; var doneTypingInterval = 10; var finaldoneTypingInterval = 500; var oldData = $("p.content").html(); $('#tyingBox').keydown(function() { clearTimeout(typingTimer); if ($('#tyingBox').val) { typingTimer = setTimeout(function() { $("p.content").html('Typing...'); }, doneTypingInterval); } }); $('#tyingBox').keyup(function() { clearTimeout(typingTimer); typingTimer = setTimeout(function() { $("p.content").html(oldData); }, finaldoneTypingInterval); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea> <p class="content">Text will be replace here and after Stop typing it will get back</p> 

Script view: http://jsfiddle.net/utbh575s/

Answer 1

Maybe you want to use debounce .

This basically limits the speed at which the function can fire. Thus, it waits a few ms before starting an event of a type such as a user stopping the recording process.

Mark this snippet

 // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // This will apply the debounce effect on the keyup event // And it only fires 500ms or half a second after the user stopped typing $('#testInput').on('keyup', debounce(function () { alert('typing occurred'); $('.content').text($(this).val()); }, 500)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="testInput" /> <p class="content"></p> 

Basically, now it is up to you. Set your own time in ms and you will go well.