On focus clear/set input fields with jQuery

Automatically clear default input values of form when a user clicks on it and restore if there is no input by user.

While creating a form it is ideal to provide a default value to help user understand what has to be entered in the box. But if the value is not cleared, it may hinder the user rather than helping them.

With this simple JavaScript function we can automatically clear the default example values when the user clicks on them and restore later if nothing is entered.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery("input").each(function() {
// clear form field on focus and restore if empty
        var default_value = this.value;
	jQuery(this).focus(function(){
	   if(this.value == default_value) {this.value = '';}
    });
        jQuery(this).blur(function(){
            if(this.value == '') {this.value = default_value;}
       });
});
});
</script>

Now if the field is selected, the default value will go away and if the user enters something, it will be left as it is.

Click here to see the working.