jQuery keyup() keydown() keypress() with Example
Hello artisan, in this article, I’m going to discuss about jQuery keyup, keydown and keypress events with example. Let’s get started:
Table of Contents
keyup()
The keyup() event specifies that the key is released.
<!DOCTYPE html>
<html>
<head>
<title>keyup()</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
alert( "Handler for .keyup() called." );
});
});
</script>
</head>
<body>
Type Something: <input type="text">
</body>
</html>keydown()
The keydown() event specifies that the key is pressed down.
<!DOCTYPE html>
<html>
<head>
<title>keydown()</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
alert( "Handler for .keydown() called." );
});
});
</script>
</head>
<body>
Type Something: <input type="text">
</body>
</html>keypress()
The keypress() event specifies that the key is pressed down. It is similar to keydown() event.
<!DOCTYPE html>
<html>
<head>
<title>keypress()</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$("input").keypress(function(){
alert( "Handler for .keypress() called." );
});
});
</script>
</head>
<body>
Type Something: <input type="text">
</body>
</html>That’s all. Thanks for reading.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.