ie8及其以下版本兼容性問題之placeholder實現

1. 普通瀏覽器下修改placeholder顏色

因爲每個瀏覽器的CSS選擇器都有所差異，所以需要針對每個瀏覽器做單獨的設定。

示例：

input::-webkit-input-placeholder { /* WebKit browsers */
    color: red;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: red;
}

2. ie8下實現placeholder並控制顏色

需要預先設置顏色類，然後通過js實現

.placeholder{
    color: red;
}

示例：

$(function(){
    if(!placeholderSupport()){   // 判斷瀏覽器是否支持 placeholder
        $('[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();
    }
});

function placeholderSupport() {
    return 'placeholder' in document.createElement('input');
}

參考鏈接：使用CSS修改HTML5 input placeholder顏色