HTML DOM onkeyup Event
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:
- In HTML:
<element onkeyup="myScript">
- In JavaScript:
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" > GeekforBeginner </ 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.