Advanced Search

Return to Snippet

Revision: 20503
at November 17, 2009 10:37 by ginoplusio
Initial Code 
<style>
  input.csson { color: red; }
  input.cssoff { color: gray; }
</style>
<form>
  <input id='author' type='text' value='' rel="writehere|type author|cssoff|csson"/><br/>
  <input id='topic' type='text' value='' rel="writehere|type topic|cssoff|csson"/><br/>
</form>


function setWriteHere(search) {
	/* add on click event handler */
	$("input[rel^="+search+"]").click( function () {
		var ar = $(this).attr('rel').split('|');
		if($(this).val()==ar[1]) { $(this).val(""); $(this).attr('class',ar[3]); }
	} );
	/* add on blur event handler */
	$("input[rel^="+search+"]").blur( function () {
		var ar = $(this).attr('rel').split('|');
		if($(this).val()=="") { $(this).val(ar[1]); $(this).attr('class',ar[2]); }
	} );
	/* trigger blur event */
	$("input[rel^="+search+"]").each( function () { $(this).blur(); } );

}

$(document).ready(function() {
	/* fix forms when ready */
	setWriteHere("writehere");
	}
);
Initial URL 
http://www.barattalo.it/2009/11/17/set-write-here-on-input/
Initial Description 
When you click on the text box the default value (such as "write here") disappears and you can type in. On blur if the textbox is empty it will appear the default value again.
Initial Title 
"Insert your email here" with javascript and JQuery
Initial Tags 
jquery
Initial Language 
jQuery