|
|
The
onkeydown event attribute in HTML is a global event attribute that triggers a script when a user presses a key on the keyboard. This event fires as soon as the key is pressed down, before it is released. |
Example of HTML onkeydown Event Attribute
It will Execute a JavaScript when a user is pressing a key.
index.html
Example:
HTML
<input type="text" onkeydown="myFunction()">
Output should be:
Definition and Usage of HTML onkeydown Event Attribute
The onkeydown attribute fires when the user is pressing a key (on the keyboard).
Tip: The order of events related to the onkeydown event:
- onkeydown
- onkeypress
- onkeyup
Browser Support of HTML onkeydown Event Attribute
Syntax of HTML onkeydown Event Attribute
<element onkeydown="script">
Attribute Values of HTML onkeydown Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onkeydown |
Technical Details of HTML onkeydown Event Attribute
| Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
|---|
How to Execute a JavaScript when a user is pressing a key
A function is triggered when the user is pressing a key in the input field.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Output should be:
How to Use "onkeydown" together with the "onkeyup" attribute
Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.</p>
<input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
<script>
function keydownFunction() {
document.getElementById("demo").style.backgroundColor = "red";
}
function keyupFunction() {
document.getElementById("demo").style.backgroundColor = "green";
}
</script>
</body>
</html>
Output should be:
| html event attributes |
| List of Keyboard Events Attribute | Keyboard Events Attribute |
| HTML onkeydown Event Attribute | Keyboard Events Attribute |
| HTML onkeypress Event Attribute | Keyboard Events Attribute |
| HTML onkeyup Event Attribute | Keyboard Events Attribute |
| Example of HTML onkeydown Event Attribute | Keyboard Events Attribute |
| Definition and Usage of HTML onkeydown Event Attribute | Keyboard Events Attribute |
| Browser Support of HTML onkeydown Event Attribute | Keyboard Events Attribute |
| Syntax of HTML onkeydown Event Attribute | Keyboard Events Attribute |
| Attribute Values of HTML onkeydown Event Attribute | Keyboard Events Attribute |
| Technical Details of HTML onkeydown Event Attribute | Keyboard Events Attribute |
| How to Execute a JavaScript when a user is pressing a key | Keyboard Events Attribute |
| How to Use "onkeydown" together with the "onkeyup" attribute | Keyboard Events Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | Keyboard Events Attribute |
Uploaded by: | Admin |
Reffered: https://www.w3schools.com/tags/ev_onkeydown.asp