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. User Avatar
    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. User Avatar
    Matt Stow
    Permalink to comment#

    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.

  3. User Avatar
    User

    I left my browser open to this page over night. When I came in this morning the page was using 665MB of memory!

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag