Detect Keyboard key press using JavaScript

0
1241

We are going to use JavaScript to detect which key is pressed in keyboard. We will track an event listener to know the key code and key name of the key that is being pressed and show it in webpage.

 

Source Code :

<style type="text/css">
  body{
    background: chocolate;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }
  .box{
    padding: 30px;
    width: 400px;
    background: #fff;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 4px solid teal;
  }
  .key-code{
    padding: 20px 0px;
    font-size: 2em;
    text-align: center;
  }
  .key-name{
    text-transform: uppercase;
    border-bottom: 4px solid teal;
    padding: 20px 0px;
    font-size: 3em;
    letter-spacing: 2px;
    text-align: center;
  }
  .key-name,.key-code{
    display: none;
  }
  .key-btn{
    font-size: 28px;
    background: teal;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
  }
</style>

<div class="box-wrapper">
  <div class="box">
    <div class="key-btn">Press a Key</div>
    <div class="key-name">
      enter
    </div>
    <div class="key-code">
      Code : 32
    </div>
  </div>
</div>

<script type="text/javascript">
  btn = document.getElementsByClassName('key-btn')[0];
  keyname = document.getElementsByClassName('key-name')[0];
  keycode = document.getElementsByClassName('key-code')[0];

  document.addEventListener("keydown", e=>{
    if(e.keyCode==32){
      name = 'space';
    }else{
      name = e.key;
    }
    btn.style.display = 'none';
    keyname.innerHTML = name;
    keycode.innerHTML = 'Code : '+e.keyCode;
    keyname.style.display = 'block';
    keycode.style.display = 'block';
  });
</script>

 

ALSO READ  Detect whether Internet speed is Fast or Slow using JavaScript

Comments are closed.