HTML DOM onkeyup Event
Last Updated :
20 Jun, 2023
The HTML DOM onkeyup event in HTML occurs when a key is released after pressing by the user. Order of events related to the onkeyup event.
Syntax:
<element onkeyup="myScript">
object.onkeyup = function(){myScript};
- In JavaScript, using the addEventListener() method:
object.addEventListener("keyup", myScript);
Example: JavaScript onkeyup Event using the addEventListener() method
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM onkeyup Event
</title>
</head>
<body>
<h1 style="color:green">
GeekforGeeks
</h1>
<p>
Press any key inside the input field
</p>
<input type="text" id="inputField"
style="background-color:green">
<script>
document.getElementById(
"inputField").addEventListener(
"keyup", GFGFun);
function GFGFun() {
document.getElementById(
"inputField").style.backgroundColor =
"yellow";
}
</script>
</body>
</html>
|
Output:
Example 2: By using HTML onkeyup.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM onkeyup Event
</title>
</head>
<body>
Enter your name:
<input type="text" id="gfg" onkeyup="myFunction()">
<p>
My name is: <span id="gfg1"></span>
</p>
<script>
function myFunction() {
let x = document.getElementById("gfg").value;
document.getElementById("gfg1").innerHTML = x;
document.getElementById("gfg").style.color = 'white';
document.getElementById("gfg").style.backgroundColor = 'red';
}
</script>
</body>
</html>
|
Output:
We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.
Supported HTML tags: All HTML elements, except <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, And <title>
Supported Browsers: The browsers supported by HTML DOM onkeyup Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...