placeholder 兼容

placeholder是html5的新增特性。

一、w3c对 placeholder  的介绍：

placeholder 示例：

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
</form>

定义和用法：

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

二、浏览器最新支持情况：

三、各个浏览器的不同表现

       差异一：各个浏览器提示文字的颜色稍有差别

        html代码：

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
</form>

       相关css：

<pre name="code" class="css"><style>
	*     {padding:0;margin:0;}
	form  {margin: 50px;}
	input {display: block;<span style="font-size:12px;">box-sizing:border-box;outline: none;</span>width:200px;height: 30px;line-height:30px;padding: 0 5px;border: 1px solid #ccc;font-size: 14px;}
</style>

         差异见图：

 

      //上图看出 除了颜色不同外，safari 下面的行高也有问题。

      差异二：ie9及以下的ie浏览器不支持这个属性

      差异三：ie10和safari是在text文本框获得焦点的时候提示文字消失，而其它现代浏览器是当text文本框输入有效值的时候提示文字消失。

四、兼容性处理

     1、样式处理：

     WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 :

::-webkit-input-placeholder

     Mozilla Firefox 4-18使用伪类 :

:-moz-placeholder

     Mozilla Firefox 19+ 使用伪元素 :

::-moz-placeholder

     IE10使用伪类 :

:-ms-input-placeholder

在样式中添加以下代码，解决占位文字颜色问题：

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

* 火狐下面同时也需要设置opacity为1

2、利用js兼容ie9以及以下版本浏览器
     下面封装了一个简单的js实现相关效果，直接调用：jsPlaceHolder.play("oInput") ，"oInput"为text文本框的id值，或者直接传入text对应的DOM元素。
      可以自定义文本框中文字颜色值,例如：jsPlaceHolder.play("oInput"，{focusColor:"#ccc",blurColor:"#ddd"})
    

(function(window){
	var jsPlaceHolder={};
	jsPlaceHolder.addListener = function(e, n, o, u){
		if(e.addEventListener){
			e.addEventListener(n, o, u);
			return true;
		} else if(e.attachEvent){
			e.attachEvent('on' + n, o);
			return true;
		}
		return false;
	};
	jsPlaceHolder.removeListener = function(e, n, o, u){
		if(e.addEventListener){
			e.removeEventListener(n, o, u);
			return true;
		} else if(e.attachEvent){
			e.detachEvent('on' + n, o);
			return true;
		}
		return false;
	};
	jsPlaceHolder.trim = function(str){
		return str.replace(/^\s+|\s+$/,"");
	};
	//oTxtId:文本框id或者Dom元素 ;option: 获得焦点color值 与失去焦点的color值
	jsPlaceHolder.play=function(oTxtId,option){
		var _this=this;
		if(!oTxtId) return false;
		//检测placeHolder支持情况
		if("placeholder" in document.createElement("input")){
			return false;
		};
		var setting={
			focusColor:"#333",
			blurColor:"#999"
		};
		option = option||{};
		for(var key in setting){
			if(!option[key]){
				option[key] = setting[key];
			}
		};
		var oTxt=null;
		if(typeof(oTxtId)!="string" && oTxtId.nodeType==1){
			oTxt = oTxtId;
			oTxtId=oTxt.id;
		}
		if(!oTxt){
			oTxt = document.getElementById(oTxtId);
			if(!oTxt) return false;
		}
		var blurTxt = _this.trim(oTxt.getAttribute("placeHolder"));
		oTxt.value = blurTxt;
		oTxt.style.color=setting.blurColor;
		_this.addListener(oTxt,"focus",function(){
			if(_this.trim(oTxt.value)==blurTxt){
				oTxt.value="";
				oTxt.style.color=setting.focusColor;
			}
		});
		_this.addListener(oTxt,"blur",function(){
			if(_this.trim(oTxt.value)==blurTxt || _this.trim(oTxt.value)==""){
				oTxt.value=blurTxt;
				oTxt.style.color=setting.blurColor;
			}
		})
	}
	window.jsPlaceHolder = jsPlaceHolder;
})(window);

未完待续：

这篇文章涉及的知识点很少，而且还有问题没有解决：

1、safari 下面的行高也有问题

2、上面的js插件只是实现了类似ie10下面的效果

所以这篇文章还是只写了一半。但是写这些文章却占据了我近两个小时的时间，中途还有好几次不想继续写了。想想那些大神坚持每周出大作真心不易，真心值得敬重！