Posted by on 12/05/2011
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.

2 comments :

  1. Napadaan lang, I think its useful but I'm not really good in HTML pa sa ngaun, I hope na maintindihan ko soon.

    ReplyDelete
  2. well, I couldn't say that I'm pretty good at HTML, its just that my job requires me to have a knowledge on such technologies. :)

    I hope this guide could help you too sometime. :)

    ReplyDelete