Posted By

ginoplusio on 11/17/09


Tagged

jquery onclick Onblur


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

petrykowski


"Insert your email here" with javascript and JQuery


 / Published in: jQuery
 

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

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.

  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. );

Report this snippet  

You need to login to post a comment.