Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM onkeyup Event

  • Last Updated : 25 Jul, 2019

The DOM onkeyup event in HTML occurs when a key is released after pressing by the user.

Order of events related to the onkeyup event:

  • onkeydown
  • onkeypress
  • onkeyup

Supported HTML tags: All HTML elements, EXCEPT:

  • <base>
  • <bdo>
  • <br>
  • <head>
  • <html>
  • <iframe>
  • <meta>
  • <param>
  • <script>
  • <style>
  • <title>

Syntax:

  • In HTML:
    <element onkeyup="myScript">
  • In JavaScript:
    object.onkeyup = function(){myScript};
  • In JavaScript, using the addEventListener() method:
    object.addEventListener("keyup", myScript);

Example: onkeyup Event using the addEventListener() method






<!DOCTYPE html>
<html>
  
<head>
    <title>
      HTML DOM onkeyup Event
  </title>
</head>
  
<body>
    <center>
        <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>
    </center>
</body>
  
</html>

Output:
Before:

After:

Supported Browsers: The browsers supported by HTML DOM onkeyup Event are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :