textarea的placeholder属性兼容ie8ie9

       前一阵子公司项目里用到了textarea的placeholder的属性，然后不兼容ie8ie9，去公司插件库里一看，妹的，只有input的兼容封装，欲哭无泪，然后在网上又查了好多，大部分都是写input的placeholder的兼容性，我刀呢？！？！？！

没法子，又不能不管，可是我又不会封装插件的能力实在是有限啊，所以，就模仿了input的元素替换的方法，最后用了一个很笨的方法给弄出来了，请各路大神不要嘲笑，哈哈。

一、html部分：　　

<textarea class = "research_description" maxlength="200" placeholder="最多可输入200字"></textarea>
<span class = "ieTextarea ieTextHide">最多可输入200字</span><--一个替换placeholder的元素span-->

二、less部分：

样式具体的我就不写了，只写用到的这两个样式：

.ieTextarea{
　　color:#999!important;
　　position:absolute;
　　top:18px;
　　left:30px;
}
.ieTextHide{
　　display: none;
}

 

三、js

if(navigator.userAgent.indexOf("MSIE 8.0")>0 && ! window.innerWidth){
　　var $textarea = $('textarea');//获取元素集合
　　$.each($textarea,function(i,el){//遍历
　　　　if($(el).text() == ''){
　　　　　　$(el).siblings('.ieTextarea').removeClass('ieTextHide');
　　　　}else{
　　　　　　$(el).siblings('.ieTextarea').addClass('ieTextHide');
　　　　};
　　});
　　$('.ieTextarea').off('focus').focus(function(){//span聚焦的时候
　　　　$(this).addClass('ieTextHide');
　　　　$(this).siblings('textarea').focus();//模仿textarea聚焦
　　});
　　$('textarea').off('blur').blur(function(){
　　　　if($(this).text() == ""){
　　　　　　$(this).siblings('.ieTextarea').removeClass('ieTextHide');//失焦的时候让模拟span显示
　　　　}
　　});
　　$('textarea').off('focus').focus(function(){
　　　　$(this).siblings('.ieTextarea').addClass('ieTextHide');
　　});
}

转载于:https://www.cnblogs.com/youngboy-front/p/7001655.html