<input type="text"> helper (fades out the text when user types) javascript

Easiest way:

<input type=text placeholder="Member name">

Try this:

<input type="text" name="member_name" value="Member Name" onFocus="field_focus(this, 'Member Name');" onblur="field_blur(this, 'Member Name');" />

Ofcourse, you would like to create input type password for the password field, so this won't be useful for the password text box.

You can also wrap this in functions if you are dealing with multiple fields:

<script type="text/javascript">
  function field_focus(field, text)
  {
    if(field.value == text)
    {
      field.value = '';
    }
  }

  function field_blur(field, text)
  {
    if(field.value == '')
    {
      field.value = text;
    }
  }

</script>

I've found that the best way to solve this is to use an <label> and position it over the input area. This gives you:

  1. More aesthetic freedom
  2. Keeps your page semantic
  3. Allows you to gracefully degrade
  4. Doesn't cause problems by submitting the tooltip as the input value or have to worry about managing that problem

Here's a vanilla version since you asked for no framework. The markup shouldn't need to change, but you may need to adjust the CSS to work with your needs.

HTML:

<html>
<head>
    <style>
    label.magiclabel {
        position: absolute;
        padding: 2px;
    }
    label.magiclabel,
    input.magiclabel {
        width: 250px;
    }
    .hidden { display: none; }
    </style>

    <noscript>
        <style>
            /* Example of graceful degredation */
            label.magiclabel {
                position: static;
            }
        </style>
    </noscript>
</head>
<body>
<label>This is not a magic label</label>

<form>
    <label class="magiclabel" for="input-1">Test input 1</label>
    <input class="magiclabel" type="text" id="input-1" name="input_1" value="">

    <label class="magiclabel" for="input-2">Test input 2 (with default value)</label>
    <input class="magiclabel" type="text" id="input-2" name="input_2" value="Default value">
</form>

<script src="magiclabel.js"></script> 
</body>
</html>

vanilla-magiclabel.js

(function() {
    var oldOnload = typeof window.onload == "function" ? window.onload : function() {};

    window.onload = function() {
        // Don't overwrite the old onload event, that's just rude
        oldOnload();
        var labels = document.getElementsByTagName("label");

        for ( var i in labels ) {
            if (
                // Not a real part of the container
                !labels.hasOwnProperty(i) ||
                // Not marked as a magic label
                !labels[i].className.match(/\bmagiclabel\b/i) ||
                // Doesn't have an associated element
                !labels[i].getAttribute("for")
            ) { continue; }

            var associated = document.getElementById( labels[i].getAttribute("for") );
            if ( associated ) {
                new MagicLabel(labels[i], associated);
            }
        }
    };
})();

var MagicLabel = function(label, input) {
    this.label = label;
    this.input = input;

    this.hide = function() {
        this.label.className += " hidden";
    };

    this.show = function() {
        this.label.className = this.label.className.replace(/\bhidden\b/ig, "");
    };

    // If the field has something in it already, hide the label
    if ( this.input.value ) {
        this.hide();
    }

    var self = this;

    // Hide label when input receives focuse
    this.input.onfocus = function() {
        self.hide();
    };

    // Show label when input loses focus and doesn't have a value
    this.input.onblur = function() {
        if ( self.input.value === "" ) {
            self.show();
        }
    };

    // Clicking on the label should cause input to be focused on since the `for` 
    // attribute is defined. This is just a safe guard for non-compliant browsers.
    this.label.onclick = function() {
        self.hide();
    };
};

Vanilla demo

As you can see, about half of the code is wrapped up in the initialization in the window.onload. This can be mitigated by using a framework. Here's a version using jQuery:

$(function() {
    $("label.magiclabel[for]").each(function(index, label) {
        label = $(label);
        var associated = $("#" + label.attr("for"));

        if ( associated.length ) {
            new MagicLabel(label, associated);
        }
    });
});

var MagicLabel = function(label, input) {
    // If the field has something in it already, hide the label
    if ( input.val() !== "" ) {
        label.addClass("hidden");
    }

    label.click(function() { label.addClass("hidden"); });
    input.focus(function() { label.addClass("hidden"); });
    input.blur(function() {
        if ( input.val() === "" ) {
            label.removeClass("hidden");
        }
    });
};

jQuery demo. The markup doesn't need to be changed, but of course you'll need to include the jQuery library.

Tags:

Javascript

Html

Recent Posts