标签：this box 实现 icon 浏览器 javascrip 动手 通过 控制
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 === placeholder){ this.value = ""; } this.style.color = ""; } ele.onblur = function(){ if(this.value === ""){ this.value = placeholder; this.style.color = "gray"; } }; if(ele.value === ""){ ele.value = placeholder; ele.style.color = "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的，只是捣鼓嘛，方法多多益善。
标签：this box 实现 icon 浏览器 javascrip 动手 通过 控制
原文地址：http://www.cnblogs.com/leaf930814/p/6931400.html
