Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM KeyboardEvent location Property
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 −
<!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 −
Updated on: 2019-07-30T22:30:26+05:30
126 Views
Advertisements