0 Members and 1 Guest are viewing this topic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery Textbox Ghost Effect Demo</title><script src="jquery.js" type="text/javascript"></script><script type="text/javascript"> $(function() { $('.ghost').each(function(index) {// Adds the Ghost effect on textbox if ($(this).val() === "" || $(this).val() === $(this).attr("title")) { $(this).attr("value", $(this).attr("title")).css({"color": "#999"}); } }); $('.ghost').on("focusin", function() { if ($(this).val() === $(this).attr("title")) { $(this).val("").css({"color": "#000000"}); } }).focusout(function() { if ($(this).val() === "") { $(this).val($(this).attr("title")).css({"color": "#999"}); } }); });</script></head><body><h1>jQuery Textbox Ghost Effect Demo</h1><br><input type="text" class="ghost" id="textfield" title="Ghost Text..." /><p> </p><p> </p><a href="http://braxtondiggs.com/tutorial/ghost_effect">Go Back</a></body></html>