How to show form input values onblur and hide onfocus

There are two ways to make text input value show onblur and hide onfocus. The first one uses a JavaScript at the head tag of your web page, while the second one uses a script on the input tag itself.

First Method (with JavaScript)

Write the script below inside the head tag of your page.

<script type="text/javascript">
function clearText(field){

    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;


After that, use the following codes:

<input name="emailaddress" type="text"  value="XXX"
onFocus="clearText(this)" onBlur="clearText(this)">

The XXX will serve as the input value.

Second Method (no JavaScript)

This method only use this script:

<input type="text" onblur="if (this.value == '') {this.value = 'XXX';}"
onfocus="if(this.value == 'XXX') {this.value = '';}" value="XXX" />

Where XXX is the input value.

The first method is ideal if you have lot of fields on a single page, while the second method is applicable if you only have few fields.

Here’s also a script to show values for textarea onblur and hide onfocus.

<textarea onblur="if(this.value=='')this.value=this.defaultValue;"
onfocus="if(this.value==this.defaultValue)this.value='';" rows="5"
cols="55" name="notes">Write your message here.</textarea>

View demo of show/hide input value onblur/onfocus.

*Some links may contain affiliate links. I may get small commission from your purchases to fund this website and to avoid annoying ads.