How to Detect Pressed key in JavaScript (Code + Demo)

This simple JavaScript project will help you to detect the pressed key on your keyboard. For example, if you want, every key pressed on your keyboard, let's look at one of the sections of the webpage. Then you can use this type of JavaScript Detect Pressed key project.

We see such designs in many large websites or applications. It will also show various information of the key you entered here such as onkeypress keycode. Watch its live demo to learn how it works.

If you need to detect keypress in any project then you can definitely use this design.

Detect Pressed key in JavaScript

I have shared the complete source code and tutorial here. To know how I created this javascript onkeypress keycode project you need to have some basic idea about javascript.

First a box was created. In the meantime another small box has been made. When you click on a key, two more boxes like that small box will be created and all the information will be seen in those 3 boxes.

✅ HTML Code

The basic structure of large box and small box has been created using the following html.

A box has been created here. The other two small boxes will be created by JavaScript.

<div class="container">
  <div class="key-container">
     <p>Press any key</p>
  </div>
</div>

✅ CSS Code

Now I have designed this detect keypress project using JavaScript.

• The first webpage was designed using css.
• Then the big box and the small box are designed.
• Then the h4 tag is designed. The question arises in your mind that no h4 tag has been used in html. In fact, it has been added to JavaScript.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #1276d1;
 }

.container {
display: flex;
width: 400px;
flex-direction: column;
padding: 2rem;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}


.key-container {
display: inline-flex;
padding: 20px;
position: relative;
color: #333;
margin: 2.5rem;
font-size: 22px;
flex-direction: column;
font-weight: bold;
min-width: 150px;
background: white;
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border-radius: 10px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}

.key-container h4 {
color: #333;
position: absolute;
top: -2rem;
right: 0px;
text-align: center;
width: 100%;
}

✅ JavaScript Code

Here is a little bit of JavaScript used to activate this javascript onkeypress keycode.

• First a global constant of the big box has been determined.
• Then the pressed key has been detected using keydown event.
• At the end all information has been arranged to be displayed in the webpage using innerHTML.

const container = document.querySelector(".container");

//The keydown event is fired when a key is pressed.
window.addEventListener("keydown", (e) => {
//console.log is a method to write code to inconspicuously inform the developers what the code is doing.
   console.log(e);
//innerHTML sets the HTML contents of an element on a web page
   container.innerHTML = 
`<div class="key-container"><h4>Key</h4>${
      e.key === " " ? "Space" : e.key
    }</div> 
<div class="key-container"><h4>Code</h4>${
      e.code
    }</div>
<div class="key-container"><h4>Key Code</h4>${e.keyCode}</div>`;
});

Here I have tried to explain as much as possible. Hopefully you have learned how to create JavaScript Detect Pressed key project.

I have created a video tutorial of this design. You can watch that video if you need more information.