How to use keyup with delay in jQuery ?
Last Updated :
01 Jun, 2023
In this article, we will see how to use keyup with a delay in jQuery. There are two ways to achieve the same:
Approach 1: Using the keypress(), fadeIn(), delay() and fadeOut() methods in the jQuery library and clearTimeout() and setTimeout() methods in native JavaScript. Firstly, a variable keyupTimer with the keyword “let” is declared such that a timeout can be set with this variable and can be uniquely identified later in the program. Next, there is an input element with an id of “geeks” which accepts any text data. Also, there is a division element that indicates when the keyup with delay effect occurs. We attach a keypress() method to this particular input element with the parameter of the method being an anonymous function. Inside the function, the clearTimeout() method is called with the parameter being the variable keyupTimer defined in the first step of the script. This is done to ensure that the variable doesn’t contain any pre-existing timeout before assigning a new timeout to it.
Thereafter, a new timeout is created with the setTimeout() method to add the delay after the keypress() function which generates the desired effect i.e. keyup with a delay. The setTimeout() method has an anonymous function as its parameter which changes the opacity of the division element from hidden to visible using the fadeIn() method and after some delay again changes the opacity of the division element, this time from visible to hidden using the fadeOut() method. The speed of the fading effects of fadeIn() and fadeOut() are both specified as “fast”.
Example: In this example, the setTimeout() method contains a delay of 800 milliseconds or 0.8 seconds and the delay specified between the fadeIn() and the fadeOut() method is 1000 milliseconds or 1 second.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
div,
p {
font-size: 25px;
font-weight: bold;
}
input {
margin: 0 auto;
}
input:focus {
outline: none !important;
border: 3px solid green;
box-shadow: 0 0 10px green;
}
/* Initially, the message to display after
keyup with delay is not visible */
div {
margin-top: 1.5rem;
display: none;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>jQuery - Use keyup with delay</p>
<input type="text" id="geeks" />
<div>Keyup with delay of 1 second!</div>
<script type="text/javascript">
let keyupTimer;
$("#geeks").keypress(function () {
clearTimeout(keyupTimer);
keyupTimer = setTimeout(function () {
$("div")
.fadeIn("fast")
.delay(1000)
.fadeOut("fast");
}, 800);
});
</script>
</body>
</html>
|
Output:
Approach 2: Using the keyup(), fadeIn(), delay() and fadeOut() methods in the jQuery library & clearTimeout() and setTimeout() methods in native JavaScript. This approach is very similar to the previous approach but the key distinction is that a keyup() method is attached to the input element instead of a keypress() method.
Example: In this example we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
div,
p {
font-size: 25px;
font-weight: bold;
}
input {
margin: 0 auto;
}
input:focus {
outline: none !important;
border: 3px solid green;
box-shadow: 0 0 10px green;
}
/* Initially, the message to display after
keyup with delay is not visible */
div {
margin-top: 1.5rem;
display: none;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>jQuery - Use keyup with delay</p>
<input type="text" id="geeks" />
<div>Keyup with delay of 1 second!</div>
<script type="text/javascript">
let keyupTimer;
$("#geeks").keyup(function () {
clearTimeout(keyupTimer);
keyupTimer = setTimeout(function () {
$("div")
.fadeIn("fast")
.delay(1000)
.fadeOut("fast");
}, 800);
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...