Ghost Text - How To Have Faint Text In Textbox

I've an online form: http://yoursdproperty.com/index.php?option=com_chronocontact&Itemid=56 I would like to have some faint gray text there so that when the user clicks on it,

Solution 1:

In HTML5, this is achieved very easily via the placeholder attribute - not sure how widely supported that is right now, though.

Solution 2:

You made no mention of jQuery, or any other javascript framework, so I'm going to give you the pure Javascript solution.

Some boolean logic based upon the value of the box to set the font color. When the user clicks the input, if the value is equal to your default value, you erase the contents. If it's not, you do nothing. When the user leaves the box, if the values are empty, add your default text in again.

// Reference our elementvar txtContent  = document.getElementById("content");
// Set our default textvar defaultText = "Please enter a value.";

// Set default state of input
txtContent.value = defaultText;
txtContent.style.color = "#CCC";

// Apply onfocus logic
txtContent.onfocus = function() {
  // If the current value is our default valueif (this.value == defaultText) {
    // clear it and set the text color to blackthis.value = "";
    this.style.color = "#000";
  }
}

// Apply onblur logic
txtContent.onblur = function() {
  // If the current value is emptyif (this.value == "") {
    // set it to our default value and lighten the colorthis.value = defaultText;
    this.style.color = "#CCC";
  }
}

Solution 3:

You can use this jQuery plugin.