Posted By

iqwebdev on 07/14/10


Tagged

forms


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

laurentzziu
fenta23
jfherring


Inputs That Remember Original Value


 / Published in: jQuery
 

A jQuery snippet to make form inputs show a help message which disappears on click (and comes back when the user enters nothing). Give your input the classes ‘remember’ to activate the snippet and (optionally) ‘unfocused’ as a CSS hook for changing the styling of the help message.

  1. var origValue = [];
  2. $('input.remember').each ( function (currentIndex)
  3. {
  4. origValue.push ( $(this).val () );
  5. $(this).focus ( function ()
  6. {
  7. $(this).removeClass("unfocused");
  8. var defaultText = $(this).val();
  9. if ( $(this).val () == origValue [ currentIndex ] )
  10. {
  11. $(this).val('');
  12. }
  13.  
  14. $(this).blur(function()
  15. {
  16. var userInput = $(this).val();
  17. if (userInput == '')
  18. {
  19. $(this).val(defaultText);
  20. $(this).addClass("unfocused");
  21. }
  22. });
  23. });
  24. });

Report this snippet  

You need to login to post a comment.