How to Display Hidden Element when a user Starts Typing using JavaScript?
Last Updated :
12 Jul, 2025
To display a hidden element when typing starts, use JavaScript event listeners like keyup or input. These events detect typing in an input field and trigger the visibility of hidden elements.
Below are the approaches to display hidden elements on typing using JavaScript:
The oninput attribute triggers whenever typing begins in an <input> or <textarea> element. It detects changes and calls a function that selects the hidden element, changing its display property to 'block', which makes it visible. The hidden element must have its display set to 'none' initially.
Syntax:
<input oninput="showElem()"></input>
function showElem() {
document.querySelector('.box').style.display = "block";
}Example: This example shows the use of the above-explained approach.
html
<!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()">
<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:
Approach 2: Using an event listener
The addEventListener() method attaches an event handler to an element, executing a specified function when the event occurs. In this case, the input event is used, which fires whenever changes happen in an <input> or <textarea> element. First, the input field where the user types is selected and stored. Then, addEventListener() is called on this input, and a function is created within it. This function selects the hidden element and sets its display property to 'block', making it visible.
Syntax:
let inputBox = document.querySelector('.inputBox')
inputBox.addEventListener('input', function() {
document.querySelector('.box').style.display = "block";
});Example: This example shows the use of the above-explained approach.
html
<!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">
<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:
Similar Reads
How to Disable Textarea using JavaScript? This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textare
2 min read
How to Find Out if an Element is Hidden with JavaScript? JavaScript provides the feature of DOM manipulation, allowing developers to dynamically interact with and modify the content and structure of a web page. One common task is determining if an element is hidden, which can be achieved through various methods such as checking the element's display or vi
3 min read
Self-Typing Text Effect using CSS & JavaScript Self-Typing Text Effect is a type of effect in which all the alphabets of the text are revealed one by one, one after the other to give the look and feel of being typed on the screen by themselves. Even though this is a basic text effect, it is still eye-capturing and effective animation. This anima
5 min read
Hide or show HTML elements using visibility property in JavaScript The visibility property is used to hide or show the content of HTML elements. The visibility property specifies that the element is currently visible on the page. The 'hidden' value can be used to hide the element. This hides the element but does not remove the space taken by the element, unlike the
1 min read
How to disable arrow key in textarea using JavaScript ? Given an HTML element containing the <textarea> element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then preve
3 min read
How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style
2 min read