How to display hidden element when a user starts typing using JavaScript ?

Method 1: Using the oninput attribute to input element: The oninput attribute is fired whenever user starts typing to the input element. This can be used to detect changes in a <input> or <textarea> element. A function is called with the value of this attribute.

This function selects the hidden element and changes its display property to ‘block’. This unhides the element, provided that the element is hidden by using ‘none’ display property. Other methods of showing the element can be used in this function.

Therefore whenever the user starts typing in the input box, the function is triggered and the hidden element is shown.



Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

<input oninput="showElem()"></input>
function showElem() {
    document.querySelector('.box').style.display = "block";
}

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to display hidden element when a
        user starts typing using JavaScript ?
    </title>
      
    <style>
        .box {
            height: 50px;
            width: 300px;
            background-color: lightgreen;
      
            /* hide the element by default */
            display: none;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        JavaScript code to show hidden
        element when a user starts typing
    </b>
      
    <p>
        Start typing in the input box
        below to unhide the message
    </p>
      
    <input oninput="showElem()"></input>
      
    <div class="box">
        You have started typing
        in the input box
    </div>
      
    <script type="text/javascript">
        function showElem() {
            document.querySelector('.box').style.display
                    = "block";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Typing:
    oninput-before-typing
  • After Typing:
    oninput-after-typing

Method 2: Adding an event listener to the input box: The addEventListener() method is used for adding an event handler to any element. Whenever the specified event occurs to the target element, the function specified is executed.

The input event is used with this method. This event fires whenever a change is detected in a <input> or <textarea> element.

The input where the user would type is first selected and stored. The addEventListener() method is then called on this input box. A new function is then created inside the method.

This function selects the hidden element and changes its display property to ‘block’. This unhides the element, provided that the element is hidden by ‘none’ display property. Other methods of showing the element can be used in this function.

Therefore whenever the user starts typing in the input box, the function is triggered and the hidden element is shown.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

let inputBox = document.querySelector('.inputBox')
  
inputBox.addEventListener('input', function() {
    document.querySelector('.box').style.display = "block";
});

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to display hidden element when a
        user starts typing using JavaScript ?
    </title>
      
    <style>
        .box {
            height: 50px;
            width: 300px;
            background-color: lightgreen;
      
            /* hide the element by default */
            display: none;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        JavaScript code to show hidden element
        when a user starts typing
    </b>
      
    <p>
        Start typing in the input box
        below to unhide the message
    </p>
      
    <input class="inputBox"></input>
      
    <div class="box">
        You have started typing in
        the input box
    </div>
      
    <script type="text/javascript">
        let inputBox = document.querySelector('.inputBox')
      
        inputBox.addEventListener('input', function() {
            document.querySelector('.box').style.display
                    = "block";
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Typing:
    eventlistener-before-typing
  • After Typing:
    eventlistener-after-typing


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.