首页 > 代码库 > IE10以下兼容H5中的placeholder

IE10以下兼容H5中的placeholder

  placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣。不支持就不支持呗,自己动手丰衣足食,我们可以用js模拟出 placeholder的效果。

1、判断浏览器是否支持 placeholder属性

"placeholder" in document.createElement("input")  //false就不支持哦

2、代码实现

//html
<input type="text" id="signName" placeholder="请输入用户名"/> //js var placeHolder = function(ele){ if(ele && !("placeholder" in document.createElement("input"))){ //元素里面的属性值复制给pleaceHolder; placeholder = ele.getAttribute("placeholder"); ele.onfocus = function(){ if(this.value =http://www.mamicode.com/== placeholder){""; } this.style.color = ""; } ele.onblur = function(){ if(this.value =http://www.mamicode.com/==""){ this.value = http://www.mamicode.com/placeholder;"gray"; } }; if(ele.value =http://www.mamicode.com/==""){ ele.value = http://www.mamicode.com/placeholder;"gray"; } } }

3、usage

placeHolder(document.getElementById("signName"));

 

4、换个思路

其实我们用一个span元素模拟placehoder的效果

<div class="search_box topSearch">
        <input type="text" name="search_key">
        <i class="search_icon"></i>
        <span class="place_holder">请输入查找的信息</span>
</div>

通过添加css模拟出placeholder的样式,再通过js去控制span元素和placeholder一样的效果,也是OK的,只是捣鼓嘛,方法多多益善。

 

 

IE10以下兼容H5中的placeholder