認識input輸入框的placeholder屬性

咱們來認識下input輸入框的placeholder屬性。

placeholder 屬性提供可描述輸入字段預期值的提示信息。(placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password)

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失（IE10+獲取焦點消失，Chrome，FF等在輸入有值時消失）。

IE10+，Chrome，Firefox，Safari支持placeholder屬性（IE6/7/8/9不支持）。　

在頁面顯示相似：

html代碼：

爲了讓IE6/7/8/9支持placeholder屬性，我說說本身解決方法。

首先判斷瀏覽器是否支持placeholder屬性。

var isSupport = function(){
	return 'placeholder' in document.createElement('input');
}

　　若是不支持，其中分兩種狀況:

　　若是是密碼框(type="password")，就建立一個相似的input標籤而且設置(type="text")，把原來有placeholder屬性的input標籤隱藏，而且把placeholder的值賦給新建的input標籤,最後把新建的input標籤插入到原來的input標籤後面。

if(input.type == 'password'){
	var newInput = document.createElement('input');
	newInput.type = 'text';
	newInput.value = input.placeholder;
	input.style.display = none;
	input.parentNode.insertBefore(newInput,input.nextSibling);
}

　　若是是通常文本框(type="text")或者其餘類型 search, url, telephone, email，就設置input的值等於placeholder屬性的值。

if(input.type == 'text'){
	input.value = input.placeholder;
}

而後是得到焦點時：

　　密碼框類型是新建input標籤得到焦點，隱藏新建input標籤，顯示原來的密碼框。

newInput.onfocus = function(){
	newInput.style.display = 'none';
	input.style.display = '';
	input.focus();
}

　　其餘類型得到焦點，清空設置的value值。

input.onfocus = function(){
	if(input.value == input.placeholder) input.value = '';
}

最後是失去焦點時：

　　密碼框類型是判斷原有的input失去焦點，若是有用戶輸入的值，不作任何改變，若是沒有就隱藏，而後顯示新建的input標籤。

input.onblur = function(){
	if(input.value == ''){  
		newInput.style.display = '';  
		input.style.display = 'none'; 
	}
}

　　其餘類型失去焦點判斷用戶是否有輸入的值，若是沒有，就設置value值爲placeholder的值，若是有就不作任何改變。

input.onblur = function(){
	if(input.value == '') input.value = input.placeholder;
}

總的來講分兩塊處理，密碼類型和非密碼類型。

爲了方便，兼容各大瀏覽器，通常要封裝成一個插件，下面是個人一個封裝，供參考。

/**
 * LBS PlaceHolder
 * ============================================
 * 直接調用:
 * PlaceHolder.init() //頁面全部input
 * PlaceHolder.create(input) //單個或多個input
 * ============================================
 * PlaceHolder.className 
 * 爲顯示佔位文本input添加類名  默認placeholder
 * ============================================
**/

;(function(){
	var PlaceHolder = {
	    _support: (function(){
	        return 'placeholder' in document.createElement('input');
	    })(),
	    className: 'placeholder',
	    init: function(){
	        if(!PlaceHolder._support){
	            var inputs = document.getElementsByTagName('input');
	            PlaceHolder.create(inputs);
	        }
	    },
	    create: function(inputs){
	    	if(PlaceHolder._support) return;
	        var input = null, i = 0, n = inputs.length, holds = [];
	        if(!n) inputs = [inputs];
	        for(; i < n; i++) holds[i] = inputs[i];
	        for(i = 0; i < n; i++){
	            input = holds[i];
	            if(PlaceHolder.attr(input,'placeholder') !== '' && PlaceHolder.attr(input,'placeholder') !== null){
		           if(input.type == 'password'){
		           		var newInput = document.createElement('input');
						newInput.type = 'text';
						newInput.className = input.className + ' ' + PlaceHolder.className;
						newInput.value = PlaceHolder.attr(input,'placeholder');
						PlaceHolder.after(newInput,input);
						input.style.display = 'none';
						PlaceHolder._newInputBind(input,newInput);
		           }else{
		           		PlaceHolder._setValue(input);
						PlaceHolder._inputBind(input);
		           }
	            }
	        }
	    },
		_newInputBind: function(input,newInput){
			PlaceHolder.on(newInput,'focus', function(){
				newInput.style.display = 'none';
				input.style.display = ''; 
				input.focus();
			});
			PlaceHolder.on(input,'focus', function(){
				newInput.style.display = 'none';
				input.style.display = '';
				input.select();
			});
			PlaceHolder.on(input,'blur', function(){
				if(input.value === ''){  
					newInput.style.display = '';  
					input.style.display = 'none'; 
				} 
			});
		},
		_inputBind: function(input){
			PlaceHolder.on(input,'focus',function(){
				if(input.value === PlaceHolder.attr(input,'placeholder')){
					input.value = '';
					PlaceHolder.removeClass(input,PlaceHolder.className);
					input.select();
				}
			});
			PlaceHolder.on(input,'blur',function(){
				if(input.value === '') PlaceHolder._setValue(input);
			});
		},
	    _setValue: function(input){
	        input.value = PlaceHolder.attr(input,'placeholder');
			PlaceHolder.addClass(input,PlaceHolder.className);
	    },
		on: function(el,type,fn){
		  if(el.addEventListener) el.addEventListener(type, fn, false);
		  else el.attachEvent('on' + type, function(){return fn.call(el,event)});
		},	
		hasClass: function (o,c){
			return -1 < (' '+ o.className +' ').indexOf(' '+ c +' ');
		},
		addClass: function(o,c){
			if(!PlaceHolder.hasClass(o,c)) o.className += ' '+ c;
		},
		removeClass: function(o,c){
			if(PlaceHolder.hasClass(o,c)){ 
				var reg = new RegExp('(\\s|^)'+ c +'(\\s|$)'); 
				o.className = o.className.replace(reg,'');
			}
		},
		attr: function(o,v){
			return o.v || o.getAttribute(v);
		},
		after: function(n,o){
			var parent = o.parentNode;
			parent.lastChild == o ? parent.appendChild(n) : parent.insertBefore(n,o.nextSibling);
		}
	};
	window.PlaceHolder === undefined && (window.PlaceHolder = PlaceHolder);
}());

 有兩種用法：

1. 頁面全部input標籤

PlaceHolder.init();

2.單個或者多個的input標籤

var input = document.getElementById('username_input');
PlaceHolder.create(input);
var inputs = document.getElementsByTagName('input');
PlaceHolder.create(inputs);

其中有個 PlaceHolder.className ， 這是個類名引用，默認類名稱是 placeholder 。

爲何要加這個類名呢？主要是爲了設置placeholder佔位文本在input標籤中的顏色。

爲了獲得一致的佔位文本顏色，須要設置樣式（假設爲紅色）

/*輸入時的顏色*/
input{color: #000;}
/*佔位時的顏色*/
input.placeholder{color: #f00;}/* IE6/7/8/9 */
input::-webkit-input-placeholder{ color:#f00;}/* WebKit */
input:-moz-placeholder{color:#f00;}/* Firefox 4 - 18 */
input::-moz-placeholder{color:#f00;}/* Firefox 19+ */
input:-ms-input-placeholder{color:#f00;}/* IE10+ */

有時候會發現設置的顏色沒有起做用，注意下CSS樣式的優先級。

能夠在各個瀏覽器看看效果：

 

 

到這裏，差很少解決了各個瀏覽器placeholder問題，其實仔細點會發現一些差異。

支持placeholder的（IE10+獲取焦點消失，Chrome，FF等在輸入有值時消失）

插件是獲取焦點消失，爲了某些人要全部瀏覽器一致的要求，得作出一些改變，原理也差很少。

世界原本是豐富多彩的，不一樣的瀏覽器不一樣的體驗有什麼很差呢？