Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Adding default search text to search box in HTML with JavaScript?
A default search text is a text that provides suggestions or a hint of what to search for in the search (input) box. Following is an illustration of a search box, where you can observe a default search text "Search your favorite tutorials?":
The above default search text will suggest to visitors that they can search for their favorite tutorial, which they want to read or open on the website.
HTML placeholder Attribute
In HTML, the text that appears inside a search box before the user types anything is shown using the placeholder attribute in the <input> element:
<input type="text" placeholder="Search items..." />
The placeholder attribute displays a hint or suggestion inside an input field that disappears when the user starts typing.
Setting Placeholder with JavaScript
You can dynamically set or change the placeholder text using JavaScript. This is useful when you want to update the search hint based on user interactions or page context.
<html>
<body>
<h2>Adding Default Search Text to Search Box</h2>
<p>The default search text gets added in the Search box:</p>
<input type="text" id="searchBox">
<script>
document.getElementById("searchBox").placeholder = "Search items...";
</script>
</body>
</html>
Dynamic Placeholder on Focus
The following example adds placeholder text when the user clicks inside the search box:
<html>
<head>
<style>
* {
font-family: sans-serif;
}
input {
width: 400px;
padding: 15px;
border-radius: 8px;
border: 2px solid #ddd;
outline: none;
font-size: 16px;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<h2>Adding Default Search Text on Focus</h2>
<p>Click inside the search box to see the placeholder text:</p>
<input type="text" id="searchBox">
<script>
const searchBox = document.getElementById("searchBox");
searchBox.addEventListener("focus", () => {
searchBox.placeholder = "Search for your favorite tutorials...";
});
</script>
</body>
</html>
Button-Triggered Placeholder
This example adds placeholder text when the user clicks a button:
<html>
<head>
<style>
* {
font-family: sans-serif;
}
input {
width: 400px;
padding: 15px;
border-radius: 8px;
border: 2px solid #ddd;
outline: none;
font-size: 16px;
background-color: #f8f9fa;
margin-right: 10px;
}
button {
padding: 15px 20px;
border: none;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border-radius: 5px;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h2>Adding Search Hint with Button</h2>
<p>Click the button to see search suggestions:</p>
<input type="text" id="searchBox">
<button id="btn">See Search Hint</button>
<script>
const searchBox = document.getElementById("searchBox");
const btn = document.getElementById('btn');
btn.onclick = () => {
searchBox.placeholder = "Search for courses...";
searchBox.focus();
}
</script>
</body>
</html>
Placeholder vs Value Property
There's an important difference between placeholder and value properties:
<html>
<body>
<h2>Placeholder vs Value</h2>
<p>Placeholder (hint text):</p>
<input type="text" id="placeholderBox">
<p>Value (actual content):</p>
<input type="text" id="valueBox">
<script>
// Placeholder disappears when user types
document.getElementById("placeholderBox").placeholder = "Type here...";
// Value is actual text content
document.getElementById("valueBox").value = "Editable content";
</script>
</body>
</html>
Comparison
| Property | Behavior | User Interaction |
|---|---|---|
placeholder |
Shows hint text | Disappears when user types |
value |
Shows actual content | Can be edited by user |
Conclusion
JavaScript allows you to dynamically control search box placeholders using the placeholder property. Use placeholders for hints and the value property for default content that users can edit.
616 Views
