When building interactive web forms, you may want to clear the default text inside a field when the user clicks on it — and restore it if they leave the field empty. JavaScript offers powerful ways to do this using onClick and onBlur events.
In this guide, we’ll explore multiple methods to clear and restore input field values using JavaScript, covering both inline and functional approaches, along with tips for better UX.
✅ Method 1: Use HTML Placeholder (Simplest Method)
The easiest way to show a hint or instruction in a field is by using the placeholder attribute:
<input type="text" placeholder="Search here..." />Note: Placeholder text is not submitted with the form if the field is left untouched.
✅ Method 2: Inline JavaScript – Clear Field on Click
<input type="text" value="Search here..." onclick="this.value=''" />⚠️ Problem: If the user clicks the field but doesn’t enter any text, it stays empty.
✅ Method 3: Restore Default Value onBlur if Left Empty
We can combine onClick and onBlur to ensure the default value comes back if the user doesn’t type anything:
<input type="text" value="Search here..."
onclick="this.value=''"
onblur="if(this.value == '') { this.value = 'Search here...' }" />However, this method clears user-entered data if they re-click the field. Not ideal!
✅ Method 4: Preserve User Data While Clearing Defaults
To prevent clearing the user’s input unintentionally, add a condition to only clear the field if it contains the default value:
<input type="text" value="Search here..."
onclick="if(this.value == 'Search here...') { this.value = '' }"
onblur="if(this.value == '') { this.value = 'Search here...' }" />✅ Now the field:
- Clears the placeholder text on click
- Restores it on blur if left empty
- Keeps user data safe
✅ Method 5: Use a JavaScript Function for Cleaner Code (Recommended)
If you’re working with multiple form fields, use a reusable JavaScript function instead of inline JS.
HTML:
<input type="text" value="Search here..." onClick="return clearMyField(this);" onBlur="return clearMyField(this);" />
<input type="email" value="[email protected]" onClick="return clearMyField(this);" onBlur="return clearMyField(this);" />
<textarea onClick="return clearMyField(this);" onBlur="return clearMyField(this);">Your message...</textarea>JavaScript:
<script>
function clearMyField(field) {
const defaultVal = field.defaultValue;
const currentVal = field.value;
if (currentVal === "") {
field.value = defaultVal;
return;
}
if (currentVal === defaultVal) {
field.value = '';
return false;
}
}
</script>🔍 Why this is better:
- Centralizes logic in one place
- Works across inputs and textareas
- Prevents accidental data loss
📝 Summary
| Method | Description | Best For |
|---|---|---|
| Placeholder | Uses HTML attribute only | Simple hints |
| Inline JS | Clears or restores value using onClick / onBlur | Small forms |
| Functional JS | Reusable logic with conditions | Larger, scalable forms |
🙋♂️ Questions or Suggestions?
If you have questions or want to suggest improvements, feel free to leave a comment or reach out. Your feedback is appreciated! If you want to hire a JavaScript or jQuery developer contact us.
