Hey friends, today in this blog, you’ll learn how to Detect User Pressed Key in HTML CSS & JavaScript. In the earlier blog, I have shared how to Detect User Browser in JavaScript, and now it’s time to create a simple program using vanilla JavaScript that detects the user pressed key.
In this beginner project (Detect Pressed Key), when you press any key, the key name and key code are shown in the box as you can see in the preview image. After reading this blog, you’ll be able to perform different operations on a particular user key pressed.
If you don’t want to read the blog, then you can watch a demo or full video tutorial of this project (Detect Key Presses in JavaScript).
Video Tutorial of Detect Pressed Key in JavaScript
In the video, you have seen the demo of this Detect Key Presses and how I created it using HTML CSS & JavaScript. I hope you have understood the codes and concepts behind creating this project. Only a few lines of JavaScript codes are used so if you’re too beginner then you can still understand it.
In this video, I have only shown how you can know which key is pressed by the user but you can use this method to perform different tasks on a particular key pressed like: If the user presses enter key then you can submit the form.
If you liked this project and want to get source codes then you can get it easily from the bottom of this page. But, before you go to copy codes, please watch the full video so you can easily understand the given codes.
You might like this:
- Detect AdBlocker in JavaScript
- Detect User Browser in JavaScript
- Draggable Div Element in JavaScript
- Get Location of a User in JavaScript
Detect Pressed Key in JavaScript [Source Codes]
To create a program that Detect User Pressed Key in JavaScript. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Detect Pressed Key in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="box">
<p class="text">Press any key</p>
<div class="content">
<div class="key-code"></div>
<div class="key-name"></div>
<div class="details">
<p class="key">Key: <span></span></p>
<p class="code">Code: <span></span></p>
</div>
</div>
</div>
<script>
const box = document.querySelector(".box");
document.addEventListener("keydown", e =>{
let keyName = e.keyCode === 32 ? "Space" : e.key;
box.querySelector(".key-code").innerText = e.keyCode;
box.querySelector(".key-name").innerText = keyName.toUpperCase();
box.querySelector(".key span").innerText = keyName;
box.querySelector(".code span").innerText = e.keyCode;
box.classList.add("active");
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #17A2B8;
}
.box{
padding: 25px;
width: 290px;
border-radius: 15px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.text, .key-code, .key-name{
font-size: 45px;
color: #17A2B8;
font-weight: 500;
}
.text{
font-size: 30px;
text-align: center;
pointer-events: none;
}
.box.active .text{
display: none;
}
.content, .key-code, .details{
display: flex;
align-items: center;
justify-content: center;
}
.content{
display: none;
flex-direction: column;
}
.box.active .content{
display: flex;
}
.content .key-code{
height: 110px;
width: 110px;
background: #fff;
border-radius: 50%;
margin-bottom: 15px;
pointer-events: none;
border: 5px solid #17A2B8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content .details{
width: 100%;
margin-top: 15px;
justify-content: space-evenly;
}
.details p{
width: 100%;
font-size: 18px;
text-align: center;
}
.details p:last-child{
border-left: 1px solid #bfbfbf;
}
That’s all, now you’ve successfully created a simple program that Detects User Pressed Key using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problem then feel free to contact me through the contact page.
