ie9不支持placeholder

html:

<Input

    v-model="searchWord"

    placeholder="查找关键词"

    @on-enter="searchTags"

    @on-focus="inputFocus"

    @on-blur="inputBlur">

</Input>

<span class="search-icon" v-if="icon === 'search'" @click="clickSearch"></span>

<span class="clear-icon" v-else @click="clickSearch"></span>

methods {

    // 兼容IE9下的placeholder

placeholderSupport () {

return 'placeholder' in document.createElement('input');

},

    inputFocus () {

this.icon = 'close'

},

inputBlur () {

setTimeout(() => this.icon = 'search', 300)

},

    // 点击图标搜索

clickSearch () {

if (this.icon === 'close') {

this.searchWord = ''

$('span.placeholder').show()

// 重新获取数据

}else {

// 进行搜索

}

},

}

mounted {

    // ie9 placeholder

// 判断浏览器是否支持 placeholder

if(!this.placeholderSupport()){

$("[placeholder]").each(function(){

var _this = $(this);

var left = _this.css("padding-left");

_this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' +

left + '; position: absolute; top: 10px; left: 5px; color: #ccc;">' +

_this.attr("placeholder") + '</span>');

if(_this.val() != ""){

_this.parent().find("span.placeholder").hide();

}

else{

_this.parent().find("span.placeholder").show();

}

}).off('focus').on("focus", function(){

$(this).parent().find("span.placeholder").hide();

}).off("blur").on("blur", function(){

var _this = $(this);

if(_this.val() != ""){

_this.parent().find("span.placeholder").hide();

}

else{

_this.parent().find("span.placeholder").show();

}

});

// 点击表示placeholder的标签相当于触发input

$("span.placeholder").off('click').on("click", function(){

$(this).hide();

$(this).siblings("[placeholder]").trigger("click");

$(this).siblings("[placeholder]").trigger("focus");

});

}

}

css:  自行定义