Advanced Search

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.

Expand | Embed | Plain Text

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.