Inputs That Remember Original Value


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.