"User is typing" function in chat
I have created a fiddle that might be helpful to you. The idea is to refresh activity message using javascript setInterval function.
var textarea = $('#textarea');var typingStatus = $('#typing_on');var lastTypedTime = new Date(0); // it's 01/01/1970, actually some time in the pastvar typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." messagefunction refreshTypingStatus() { if (!textarea.is(':focus') || textarea.val() == '' || new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) { typingStatus.html('No one is typing -blank space.'); } else { typingStatus.html('User is typing...'); }}function updateLastTypedTime() { lastTypedTime = new Date();}setInterval(refreshTypingStatus, 100);textarea.keypress(updateLastTypedTime);textarea.blur(refreshTypingStatus);
<script> function isTyping() { document.getElementById('typing_on').innerHTML = "User is typing...! "; } function notTyping (){ document.getElementById('typing_on').innerHTML = "No one is typing ! "; } </script> <label> <textarea onkeypress="setTimeout(isTyping(),4000); setInterval(notTyping,5000)" name="textarea" id="textarea" cols="45" rows="5"></textarea> </label> <div id="typing_on">No one is typing -blank speace.</div> <!DOCTYPE html> <html> <head> </head> <body> <script> function isTyping() { document.getElementById('typing_on').innerHTML = "User is typing...! "; } function notTyping (){ document.getElementById('typing_on').innerHTML = "No one is typing ! "; } </script> <label> <textarea onkeypress="setTimeout(isTyping(),4000); setInterval(notTyping,5000)" name="textarea" id="textarea" cols="45" rows="5"></textarea> </label> <div id="typing_on">No one is typing -blank speace.</div> </body> </html> Hide resultsExpand snippet
Theres a nifty library plugin called underscore.js
Among its many useful functions is one called _.debounce, which can be used like so to track typing:
var typing, typingStarted, typingStopped;typing = false;typingStopped = _.debounce((function() { if (!typing) { return; } typing = false; console.log('typing is done so do what ever you need to do to notify it');}), 5000);typingStarted = function() { if (this.typing) { return; } typing = true; console.log('typing has started so do what ever you need to do to notify it');};document.querySelector("textarea").oninput = function(event) { typingStarted(); typingStopped(); return};The way this works is that on input of the text area typingStarted is called and sets typing to true preventing it from being called again.typingStopped is then called, but will only invoke the function wrapped in the _.debounce after 5000 ms which is given as the second argument to _.debounce. However if you call typingStopped again, it will reset the countdown back to 5000 ms from where ever it was at. Since typingStopped is called on each input, it will only ever execute typing = false after a full 5 seconds between key presses.