CODEWITHSUNDEEP
javascripthtmlcssformsstyles
Proves Mes
Proves Mes

Reputation: 1

Labels inside input fields that disappear when focussed

How do I get labels that are formatted like this:

<label for="email"> Email Address *</label>
<input id="email" type="text" name="email" value="" size="18">

to display inside the input textbox and disappear when the input element is in focus or full?

The solutions I've found require me to alter the html code, which I can not do because it comes from a third-party widget. I can get the label to display on top of the input field, but I don't know how to get it to react to what happens to the input field.

Upvotes: 0

Views: 4419

Answers (4)

Melanie
Melanie

Reputation: 1208

What you want is a placeholder. Its an HTML5 attribute, but isn't supported by IE yet and older browser. To fill in, there's a couple of library out there. I've used jquery.enablePlaceholder and it works fine.

Using JQuery, you will be able to easily hide/remove the current label and use its content to fill the placeholder attribute (that will then be used by the plugin if required).

$(document).ready(function() {
    // Fetch the label and its text
    var placeholderText = $("label[for='email']").text();

    // Remove the unnecessary label
    $("label[for='email']").remove();

    // Set the placeholder attribute
    // and enable the plugin for broswer not supporting it
    $("#email").attr('placeholder', placeholderText).enablePlaceholder(); 
});

Upvotes: 4

Ryan
Ryan

Reputation: 1395

If you're able to use jQuery:

$("#yourForm input[type='text']").each(function(){
    $(this).attr("placeholder", $(this).prev("label").text());
}

Upvotes: 0

David Thomas
David Thomas

Reputation: 253396

Given that you can't change the HTML structure, here's one plain JavaScript means of achieving your aim:

function placeholding(el,greyed) {
    if (!el) {
        // if you don't specify a DOM node, it quits
        return false;
    }
    else {
        var input = el,
            /* assumes the label element is the previous element sibling
               (requires a fairly up-to-date/compliant browser */
            label = el.previousElementSibling,
            placeholder = label.textContent,
            /* specifies the color string, or uses the default, for the
               color of the place-holder */
            greyed = greyed || '#999';

        label.style.display = 'none';
        input.value = placeholder;
        input.style.color = greyed;
        input.onfocus = function() {
            /* if the current input-value is equal to the place-holder,
               removes that value. */
            if (this.value == placeholder) {
                this.setAttribute('data-oldvalue', this.value);
                this.value = '';
            }
            this.style.color = '#000';
        };
        input.onblur = function() {
            // if no new value has been set, replaces the place-holder
            if (this.value == '' || this.value.length === 0) {
                this.value = this.getAttribute('data-oldvalue');
                this.style.color = greyed;
            }
        };
    }
}

placeholding(document.getElementById('email'));​​​​​

Which hides the previous label element, uses its text as a 'placeholder' in the input element, hides that place-holder on focusing the input and, if the value is not changed, displays the place-holder again.

References:

Upvotes: 0

Tooraj Jam
Tooraj Jam

Reputation: 1612

Is there any way to override input onFocus function?

If positive, there is two way:

  • Try return false;
  • set Label display attribute to inline on that function. (not recommended)

Upvotes: 0

Related Questions