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:

Single Articles

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

List of Keyboard Events Attribute	Keyboard Events Attribute
What is HTML onkeydown Event Attribute	Keyboard Events Attribute
What is HTML onkeypress Event Attribute	Keyboard Events Attribute
What is HTML onkeyup Event Attribute	Keyboard Events Attribute

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