HTML onkeydown Event Attribute - HTML Keyboard Events Attribute

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

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Keyboard Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference