jQuery(document).ready(function(){
// on focusing
jQuery('#contact-form input[type=text], #contact-form textarea').focus(function() {
// check if the current value equals the one in the title attribute
if ( jQuery(this).val() == jQuery(this).attr("title")) {
// if so replace the current value with empty string or no value
jQuery(this).val("");
}
});
// on blur or the input element going out of fucus
jQuery('#contact-form input[type=text], #contact-form textarea').blur(function() {
// check if the current value is empty
if ( jQuery(this).val() == "") {
// if it is empty set the value to the text in the title attribute( restoring the placeholder )
jQuery(this).val($(this).attr("title"));
// this is just a beauty touch
// when the placeholder is active set the color to something more neutral
// so that the user can notice the difference between a placeholder and actual value
jQuery(this).css("color", "rgb(24, 179, 255)");
}
});
// this also part of the beauty touch
// if you don't mind the color of the placeholder you can skip this
// check if the user has just pressed a key
jQuery('#contact-form input[type=text], #contact-form textarea').keyup(function() {
// if so set the color to slightly darker tone
// this is again only in order for the user to be able to make the difference
// between a placeholder and a value easily
jQuery(this).css("color", "rgb(0, 70, 158)");
});
});