IE10如下兼容H5中的placeholder 以及改變它默認顏色

　　placeholder是H5<input>的屬性之一，惋惜在IE10如下不支持，萬惡的IE！不過正由於有IE，纔多了不少搗鼓，添了樂趣。不支持就不支持唄，本身動手豐衣足食，咱們能夠用js模擬出 placeholder的效果。

一、判斷瀏覽器是否支持 placeholder屬性

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

二、代碼實現

//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";
				}
			}
		}

三、usage

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

　

四、換個思路

其實咱們用一個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的，只是搗鼓嘛，方法多多益善。

 

五、placeholder的默認顏色爲灰色，怎麼改變顏色呢？

使用僞元素

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #fff; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #fff; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #fff; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #fff; 
}