HTML | onkeydown Event Attribute
This onkeydown event attribute works when user presses any key from the keyboard.
Syntax:
<element onkeydown = "script">
Attribute Value: This attribute contains single value script which works when any key pressed from the keyboard.
Supported Tags: It is supported by all HTML elements except <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.
Example:
<!DOCTYPE html> < html > < head > < title > HTML | onkeydown Event Attribute </ title > < style > h1 { text-align: center; color: green; } h2 { text-align: center; } input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; font-size: 24px; color: white; } p { font-size: 20px; } </ style > </ head > < body > < h1 >GeeksforGeeks< h1 > < h2 >onkeyup Event Attribute</ h2 > < p >Release the key to set a green background color.</ p > < input type = "text" id = "demo" onkeydown = "keydownFunction()" onkeyup = "keyupFunction()" > < script > function keyupFunction() { document.getElementById("demo").style.backgroundColor = "blue"; } function keydownFunction() { document.getElementById("demo").style.backgroundColor = "green"; } </ script > </ body > </ html > |
Output:
Press the key:
Release the key:
Supported Browser: The browser supported by onkeydown event attribute are listed below:
- Chrome
- Internet Explorer
- Firefox
- Safari
- Opera