Question

I have this jquery code that handles the logic of placeholder text for two input fields:

$(document).ready(function() {

$("form input.link").attr("value", "Media Link Here (optional)");
$("form input.email").attr("value", "*Email Address Here");

$("form input.link").live("focus", function() {
    if ( $(this).val() == "Media Link Here (optional)"){
    $(this).val("");
  }
});

$("form input.email").live("focus", function() {
    if ( $(this).val() == "*Email Address Here"){
    $(this).val("");
  }
});

$("form input.link").live("focusout", function() {
    if ( $(this).val() == "" ){
    $(this).attr("value", "Media Link Here (optional)");
  }
}); 

$("form input.email").live("focusout", function() {
    if ( $(this).val() == "" ){
    $(this).attr("value", "*Email Address Here");
  }
});

});

I want to style the placeholder text so that it has a different styling than the text that the user types into the field. How can I do this?

Answer 1

Give the textbox a special class which goes away upon focus() and gets added upon blur() if there’s no content.

.placeholder {
  color: gray;
  font-style: italic;
}

$('.box').focus(function() {
  if (this has default text) {
    $(this).val('');
    $(this).removeClass('placeholder');
  }
});

And add the class when the user blurs and the text is default.