Reply To: CSS to make my placeholder text very light?

[Podders]

@theograd That script is not “Adding” support for placeholders in IE, it’s removing the native placeholder fuctionality from browsers that do actually support the placeholder attribute,

You should really be running a check to see if the browser supports placeholders before allowing this script to execute,

You can do this with a simple check by creating a input element then checking to see if that element natively has a placeholder attribute,

function supportPlaceholders(){
        var inp = document.createElement('input');
        return "placeholder" in imp;
}

So your script would become

$(document).ready(function(){
var ph = supportPlaceholders();
if(ph){
    $('[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.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
});
}

function supportPlaceholders(){
    var inp = document.createElement('input');
    return 'placeholder' in imp;
}

This would then only run your script in browsers that do not support the placeholder

@thedoc The $('[placeholder]') selector is perfectly valid, it will return an object of all elements in the dom that actually have a placeholder attribute specified in the markup, of course to add input $('input[placeholder]') would make the selector more efficient but it is still valid all the same