HTML DOM KeyboardEvent location Property

HTML Web Development Front End Technology

The HTML DOM KeyboardEvent loaction property returns the number corresponding to location of key pressed on the keyboard.

Syntax

Following is the syntax −

Returning location of pressed key −

event.location

Numbers

Here, number returned can be the following −

number	Descriptions
0	It represents almost all values on the keyboard. (every key in the middle section of keyboard, eg: ‘Q’, ’\’, ’spacebar’)
1	It represents the values on the left-keyboard. (every key in the left section of keyboard, eg: ‘left ctrl’, ’left Shift’, ’left alt’)
2	It represents the values on the right-keyboard. (every key in the right section of keyboard, eg: ‘right ctrl’, ’right Shift’, ’right alt’)
3	It represents the values on the numpad-keyboard. (every key in the numpad section of keyboard, eg: ‘1’, ’/’, ’.’)

Example

Let us see an example for KeyboardEvent location property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent location</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-location</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="type here..." onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.location === 0)
         divDisplay.textContent = 'key Pressed in middle section';
      else if(InputEvent.location === 1)
         divDisplay.textContent = 'key Pressed in left section';
      else if(InputEvent.location === 2)
         divDisplay.textContent = 'key Pressed in right section';
      else
      divDisplay.textContent = 'key Pressed in numpad section';
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before typing anything in the text field −

After typing ‘w’ in the text field −

After pressing ‘+’ in the text field from numpad −

AmitDiwan

Updated on: 30-Jul-2019

49 Views

Kickstart Your Career

Get certified by completing the course

Get Started