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

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.

$(".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. Detecting support for specific HTML 5 features via jQuery