Cross browser placeholder

by someprimetime

HTML

<input id ="demo" placeholder="Placeholder Text" />

CSS

.placeholder {
    color: #999;
}

JavaScript

var testPlaceholder = function(el, attr) {
    var $testElement = document.createElement(el);
    if (attr in $testElement) {
        return true;
    } else {
        return false;
    }
};

if (!testPlaceholder('input', 'placeholder')) {
    $('[placeholder]').focus(function() {
        var $input = $(this);

        if ($input.val() === $input.attr('placeholder')) {
            $input.val('').removeClass('placeholder');
        }
    }).blur(function() {
        var $input = $(this);
        if ($input.val() === '' || $input.val() === $input.attr('placeholder')) {
            $input.addClass('placeholder').val($input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var $input = $(this);

            if ($input.val() == $input.attr('placeholder')) {
                $input.val('');
            }
        });
    });
}