Alt Placeholder

Add placeholder browser support as needed.

by wallabykid

HTML

<p>Test in different browsers to see the results.</p>
<div id="dest_zip">
    <input type="text" placeholder="U.S. Postal Code" />
</div>

CSS

#dest_zip {
    width: 120px;
    margin: 20px auto;
    padding: 20px;
    color: #333;
    background-color: #9fe1ff;
    border: 4px solid #333;
}
#dest_zip input {
    width: 90%;
}
.hasPlaceholder {
    color: #777;
}

JavaScript

// Add placeholder browser support as needed.
jQuery(function () {
    alt_placeholder();
});

function alt_placeholder() 
{   var test = document.createElement('input');
    if ('placeholder' in test) return false;
    jQuery('input[placeholder]').each(function () { //Assign to those input elements that have 'placeholder' attribute
        var input = jQuery(this);
        jQuery(input).val(input.attr('placeholder')).addClass('hasPlaceholder');
        jQuery(input).on('paste', function () {
            input.removeClass('hasPlaceholder');
            if (input.val() == input.attr('placeholder')) input.val('');
        });
        jQuery(input).on('keypress', function () {
            input.removeClass('hasPlaceholder');
            if (input.val() == input.attr('placeholder')) input.val('');
        });
        jQuery(input).blur(function () {
            if (input.val() == '' || input.val() == input.attr('placeholder')) input.val(input.attr('placeholder')).addClass('hasPlaceholder');
        });
    });
}

function ph_support() {
    var test = document.createElement('input');
    if ('placeholder' in test) return true;
    else return false;
}