ie8及其以下版本兼容性问题之placeholder实现

最新推荐文章于 2023-11-28 19:51:01 发布

YSP易水寒

最新推荐文章于 2023-11-28 19:51:01 发布

阅读量267

点赞数

分类专栏：浏览器兼容文章标签： ie 8 兼容性

本文链接：https://blog.csdn.net/yishuihan_001/article/details/73610442

版权

浏览器兼容专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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');
}