placeholder字体样式及兼容

Posted 2020-10-16

样式修改css
::-webkit-input-placeholder { /* WebKit browsers */ color: #fff!important;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  color: #fff!important;}
::-moz-placeholder { /* Mozilla Firefox 19+ */  color: #fff!important;}
:-ms-input-placeholder { /* Internet Explorer 10+ */  color: #fff!important;}


兼容方法

//    判断浏览器是否支持placeholder
var isPlaceholderSupport = (function(){
    return ‘placeholder‘ in document.createElement(‘input‘);
})();
if(!isPlaceholderSupport){
    $(‘[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(‘‘);
            }
        })
    });
}