The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Inputs That Remember Original Value

Last updated on:
var origValue = [];
$('input.remember').each ( function (currentIndex)
       origValue.push ( $(this).val () );
       $(this).focus ( function ()
               var defaultText = $(this).val();
               if ( $(this).val () == origValue [ currentIndex ] )

                       var userInput = $(this).val();
                       if (userInput == '')

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. Helen Rysavy
    Permalink to comment#


    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?


  2. 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

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed