helper (fades out the text when user types) javascript

Question

I want to add helpful text (in javascript WITHOUT ANY FRAMEWORK USE) in input fields text and textarea something like this but dont know what its called

me.com

As it is used in me.com but I dont want to submit the values that are used as helpers.

Sorry for bad english.

Thank You.

Ms2ger · Accepted Answer

Easiest way:

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

Sarfraz · Answer

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>

Justin Johnson · Answer

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:

More aesthetic freedom
Keeps your page semantic
Allows you to gracefully degrade
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.

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

Tags:

javascript

html

Shishant

3 Answers

Ms2ger

Sarfraz

Justin Johnson

Recent Activity

Donate For Us