Question

I have many textfields that show instruction text within the textbox (how the default value would look). On focus the color of the text becomes lighter, but doesn’t go away until text is entered. When text is erased, the label returns. It’s pretty slick. A default value doesn’t cut it, because these go away onfocus.

I have it working, but the code is complicated because it relies on negative margins that correspond to the individual widths of the textfields. I want a dynamic solution where the label for its textfield is positioned correctly automatically, probably using a script.

Any help would be greatly appreciated. But I am not looking for default values as a solution.

Thanks.

Mike

Edited to be more precise.

Edited again to provide some simple code that illustrates the effect I am after:

<input style="position: relative; width: 150px; font-size: 10px; font-family: Verdana, sans-serif; " type="text" name="name" id="name"
onfocus="javascript: document.getElementById('nameLabel').style.color='#BEBEBE';"
onkeypress="javascript: if (event.keyCode!=9) {document.getElementById('nameLabel').innerHTML='&nbsp;';}"
onkeyup="javascript: if (this.value=='') document.getElementById('nameLabel').innerHTML='Your&#160;Name';"
onblur="javascript: if (this.value=='') {document.getElementById('nameLabel').style.color='#7e7e7e'; document.getElementById('nameLabel').innerHTML='Your&#160;Name';}"/>
<label id="nameLabel" for="name" style="position: relative; margin-left: -150px; font-size: 10px; font-family: Verdana, sans-serif;">Your Name</label>

Answer 1

I would have taken a different approach (It’s not entirely my idea, but i can’t find the source for credit):

1st – Use html5 “placeholder” property.

2nd – Use Modernizr.js to detect support of placeholders in the browser and a simple jQuery script to add support to browsers that doesn’t support it.

So, the html will look something like that:

<input type="text" class="placeholder" placeholder="Help Text" />
<textarea class="placeholder" placeholder="Another help text"></textarea>

The css:

.placeholder{color:#ccc;}

And the javascript:

/* Set placeholder for browsers that don't support HTML5 <input placeholder='text'>
 * Depends on Modernizr v1.5
 */
if (!Modernizr.input.placeholder){
    $('input[placeholder], textarea[placeholder]')
        .focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        })
        .blur(function() {
            var input = $(this);
            if (input.val() == '') {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }

        })
        //Run once on load
        .blur();

    // Clear all 'placeholders' on submit
    $('input[placeholder], textarea[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}