Advanced Search

"Insert your email here" with javascript and JQuery

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2.   input.csson { color: red; }
  3.   input.cssoff { color: gray; }
  4. </style>
  5. <form>
  6.   <input id='author' type='text' value='' rel="writehere|type author|cssoff|csson"/><br/>
  7.   <input id='topic' type='text' value='' rel="writehere|type topic|cssoff|csson"/><br/>
  8. </form>
  9.  
  10.  
  11. function setWriteHere(search) {
  12. 	/* add on click event handler */
  13. 	$("input[rel^="+search+"]").click( function () {
  14. 		var ar = $(this).attr('rel').split('|');
  15. 		if($(this).val()==ar[1]) { $(this).val(""); $(this).attr('class',ar[3]); }
  16. 	} );
  17. 	/* add on blur event handler */
  18. 	$("input[rel^="+search+"]").blur( function () {
  19. 		var ar = $(this).attr('rel').split('|');
  20. 		if($(this).val()=="") { $(this).val(ar[1]); $(this).attr('class',ar[2]); }
  21. 	} );
  22. 	/* trigger blur event */
  23. 	$("input[rel^="+search+"]").each( function () { $(this).blur(); } );
  24.  
  25. }
  26.  
  27. $(document).ready(function() {
  28. 	/* fix forms when ready */
  29. 	setWriteHere("writehere");
  30. 	}
  31. );

URL: http://www.barattalo.it/2009/11/17/set-write-here-on-input/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.