CODEWITHSUNDEEP
javascriptjqueryhtmltyping
Ambuj Khanna
Ambuj Khanna

Reputation: 1219

Detect when user is starting/stopping typing in jquery

Once i was searching a solution for my issue and my issue was "I want to detect when user is typing and when he is stop typing so that i can update status."

I have created a sample. May it will 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>

View on Fiddle : http://jsfiddle.net/utbh575s/

Upvotes: 9

Views: 6097

Answers (1)

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 10307

Maybe what you want is the debounce functionality.

Basically it limits the rate at which a function can fire. So it waits a few ms before firing the event kind of like the user stopping the writing process.

Check 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's up to you. Set your own time in ms and you're good to go.

Upvotes: 10

Related Questions