Home »
jQuery »
jQuery Examples
How to delay the keyup() handler until the user stops typing using jQuery?
Learn, how can we delay the keyup() handler until the user stops typing using jQuery?
Submitted by Pratishtha Saxena, on September 06, 2022
prerequisite: Adding jQuery to Your Web Pages
The keyup() is one of the jQuery keypress events. It gets triggered when the keypress is left, i.e., when the key is released. These events are of great use at various times during filling something up or during searching for some keywords on the page.
Now, keyup() can be delayed or a timer can be set for it using different predefined jQuery event methods. We'll be using the setTimeout() method. This method helps to execute or call a function after a time-interval that has been set for it. The time-interval here is set in milliseconds. (1000 milliseconds = 1 second). This method takes a function name and the time-interval as its parameters.
Syntax:
setTimeout(function(){}, time-interval);
Along with setTimeout(), clearTimeout() method is also used. This makes sure that the time gets cleared every time the function gets executed. It will just take the setTimeout() variable as its parameter.
Syntax:
clearTimeout(variable);
These are the two major methods that will be taken into consideration when we want to delay the keyup() handler in jQuery. Let's have a look at the example for a better understanding.
The following example shows an input text box. When the user is writing over there, then 'You are typing...' will be displayed below. But, if the user pauses for at least two seconds, i.e., 2000 milliseconds, then it will display as 'You stopped typing !'.
Example to delay the keyup() handler until the user stops typing using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>How to delay the .keyup() handler using jQuery</h2>
<p>Write something in the given input box, if there is too much delay, it will show an alert.</p>
<label>Enter Name:</label>
<input id="myInput"><br><br>
<div id="myDiv"></div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
var timeout;
var delay = 2000;
$('#myInput').keyup(function(e) {
$('#myDiv').html('You are typing...');
clearTimeout(timeout);
timeout = setTimeout(function() {
delayFunction();
}, delay);
});
function delayFunction() {
$('#myDiv').html('You stopped typing !');
}
});
</script>
</html>
Output:
