HTML | onkeydown Event Attribute
This onkeydown event attribute works when user presses any key from the keyboard.
Supported Tags: It supports all HTML elements EXCEPT-
- <base>
- <bdo>
- <br>
- <head>
- <html>
- <iframe>
- <meta>
- <param>
- <script>
- <style>
- <title>
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:
html
<!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 1
- Edge 12
- Internet Explorer 9
- Firefox 6
- Safari 1.2
- Opera 12.1
Please Login to comment...