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

17 Sep, 2019
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:
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:
After Typing:
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Set the value of an input field in JavaScript
Differences between Functional Components and Class Components in React
Form validation using HTML and JavaScript
Difference between var, let and const keywords in JavaScript
Express.js express.Router() Function
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?
Convert a string to an integer in JavaScript