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"> neveropen </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"> neveropen </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:
