How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

Question

This works in Chrome and any other browser that supports placeholder text in HTML5

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.

How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.

Safari and Chrome already support it (or the latest versions anyway).

Thanks.

Answer 1

I use the following snippet that I wrote with jQuery. Just add a class of textbox-auto-clear to any textbox on the page and you should be good to go.

<input type="text" value="Please enter your name" class="textbox-auto-clear" />

$(".textbox-auto-clear").each(function(){
    var origValue = $(this).val(); // Store the original value
    $(this).focus(function(){
        if($(this).val() == origValue) {
            $(this).val('');
        }
    });
    $(this).blur(function(){
        if($(this).val() == '') {
            $(this).val(origValue);
        }
    });
});

I assume that you want to keep using the placeholder attribute for HTML5 browsers, in which case you'd have to do some browser detection and only apply the jQuery solution to browsers that don't support it.

Better yet, you can us the Modernizer library, as outlined in this answer. http://stackoverflow.com/questions/1657170/detecting-support-for-specific-html-5-features-via-jquery/1657182#1657182

Answer 2

One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html

In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.

Then use JS to determine if the label should be visible or not based on focusing.

Apply different styles when JS is not available to position the label beside the element instead.

Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.

Answer 3

By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.

It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.

http://labs.thesedays.com/projects/jquery/clearfield/

It's the most beautiful thing I have discovered, next to 'Placeholder' in html.