我們來認識下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等在輸入有值時消失）
插件是獲取焦點消失，為了某些人要所有瀏覽器一致的要求，得做出一些改變，原理也差不多。
世界本來是豐富多彩的，不同的瀏覽器不同的體驗有什么不好呢？