Grow your CSS skills. Land your dream job.

Last updated on:

Inputs That Remember Original Value

var origValue = [];
$('input.remember').each ( function (currentIndex)
{
       origValue.push ( $(this).val () );
       $(this).focus ( function ()
       {
               $(this).removeClass("unfocused");
               var defaultText = $(this).val();
               if ( $(this).val () == origValue [ currentIndex ] )
               {
                       $(this).val('');
               }

               $(this).blur(function()
               {
                       var userInput = $(this).val();
                       if (userInput == '')
                       {
                               $(this).val(defaultText);
                               $(this).addClass("unfocused");
                       }
               });
       });
});

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.

Comments

  1. Helen Rysavy
    Permalink to comment#

    Hiya

    I’m looking for a way to keep text input into a text box visible after a person moves away from the page, closes the browser etc, i.e. so when they come back to that page, the text they have written in the input box is still there. We need this functionality for students to build and change their ideas about something as they explore a topic. Essentially they will type something to start, go on reading through the learning material then come back and either change what they wrote or add to it.

    Do you have a script that keeps the text?

    Thanks
    Helen

  2. Did you know that you can compare input[type="text"]/textarea.defaultValue, input[type="checkbox"]/input[type="radio"].defaultChecked & option.defaultSelected against .value, .checked & .selected respectively to see if your app’s form data has changed?

    No jQuery required.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".