Adding a Default Text in a Text Field Using JQuery

Sample
Before proceeding on the code, I would want to show first the output of this:







Code

In HTML:

<input class="textFieldDefault" title="Search" type="text" value="" name="textFeldDefault" id="textFieldDefault" />

For Script:

<script>
 $(document).ready(function() {
  //Adding Default word for email
  $(".textFieldDefault").focus(function(){
   if ($(this).val() == $(this)[0].title){
    $(this).removeClass("defaultTextActive");
    $(this).val("");
   }
  });
  
  $(".textFieldDefault").blur(function(){
   if ($(this).val() == ""){
    $(this).addClass("defaultTextActive");
    $(this).val($(this)[0].title);
   }
  });
  
  $(".textFieldDefault").blur(); 
 });
</script>

How it works

The script would start to work once the page has loaded successfully. The code listens for two events: focus and blur

During the focus event:
We need to check if the value is equal to the title of the text;

if yes: we would need to remove the value written on it, since we assume this as the default text we placed.
if no: do nothing, since we assume that the current value is the one the user types in

During the blur event:
We also check the value of the text;

if it is equal to blank: we would need to replace the value with the default text which we is based on the input's title attribute.
if no: do nothing

After that, we would need to call blur function on page load to make sure that the input fields are populated with default texts

Based on the code above, you can use the defaultTextActive class to fully customized your code via CSS or Cascading Style Sheets.


NOTE: Although I haven't included on my tutorial, it is a must that you include a JQuery file on your script.