我们来认识下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 有两种用法： 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样式的优先级。
可以在各个浏览器看看效果：
/*输入时的颜色*/
#testPlaceHolder input{padding: 5px;margin: 5px;color: #000;}
/*占位时的颜色*/
#testPlaceHolder input.placeholder{color: #f00;}/* IE6/7/8/9 */
#testPlaceHolder input::-webkit-input-placeholder{ color:#f00;}/* WebKit */
#testPlaceHolder input:-moz-placeholder{color:#f00;}/* Firefox 4 - 18 */
#testPlaceHolder input::-moz-placeholder{color:#f00;}/* Firefox 19+ */
#testPlaceHolder input:-ms-input-placeholder{color:#f00;}/* IE10+ */到这里，差不多解决了各个浏览器placeholder问题，其实仔细点会发现一些差别。
支持placeholder的（IE10+获取焦点消失，Chrome，FF等在输入有值时消失）
插件是获取焦点消失，为了某些人要所有浏览器一致的要求，得做出一些改变，原理也差不多。
世界本来是丰富多彩的，不同的浏览器不同的体验有什么不好呢？