Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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


Example:




<!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>


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:




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


Example:




<!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>


Output:

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


Last Updated : 17 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads