跨浏览器 HTML5 Placeholder

跟 HTML5 的使用方法一样。在 input 中添加属性 placeholder:(摘自sofish的AliceUI项目)

关于placeholder文字的颜色

火狐和webkit内核浏览器可以直接通过css来控制，分别为:-moz-placeholder和::-webkit-input-placeholder，调用这个js之后，会给不支持placeholder的加上placeholder这个class，所以整合起来就是：

Css Code
:-moz-placeholder,
::-webkit-input-placeholder {
  color: #bfbfbf;
}
.placeholder{
	color: #bfbfbf;
}
:-webkit-autofill {
    background:#fff;
}

注：请注意不要把这两个样式写在一起，如果集体声明ie8,9将不能正确解析.placeholder的样式。有点奇怪

<input placeholder="提示文字">
<input type="text" placeholder="邮箱/手机号/用户名">
<input type="password" placeholder="请输入密码">

JavaScript辅助：
<script>
// placeholder 功能扩展
window.onload = function(){
    var doc = document,
    inputs = doc.getElementsByTagName('input'),

    // 检测 placeholder 支持
    supportPlaceholder = 'placeholder' in doc.createElement('input'),
    supportPlaceholdertextarea = 'placeholder' in doc.createElement('textarea'),

/*
 * 创建 placeholder
 * @param {ELEMENT} input 传入的 input 对象
 * @return {VOID}
 * @author: sofish Lin http://sofish.de
 */
    placeholder = function(input){
        var text = input.getAttribute('placeholder'),
            defaultValue = input.defaultValue;
        if(input.value=="" || input.value==text){
            // 制作一个假 placeholder
            // 需要 css 配合，在 JS 中设置 style 并不太好
            input.value=text;
            // input.style.color = 'gray';
            input.className = 'placeholder';
        }

        // 聚焦去掉假 placeholder
        input.onfocus = function(){
            if(input.value === text){
                this.value = '';
                // this.style.color = '';
                input.className = '';
            }
        }

        // 当失焦值为空时，补回 placeholder 的值
        input.onblur = function(){
            if(input.value === ''){
                // input.style.color = 'gray';
                input.className = 'placeholder';
                this.value = text;
            }
        }
        input.onkeydown = function(){
            this.style.color = '';
        }
    };

    if(!supportPlaceholder){
    	for(var i = 0, len = inputs.length; i < len; i++){
    	    var input = inputs[i], text = input.getAttribute('placeholder');

    	    // 当 input[type=text] 并且 placeholder 值不为空是执行
    	    if(input.type === 'text' && text){
    	    	placeholder(input);
    	    }
    	}
    }
};

</script>

问题及注意事项：

对不支持 placeholder 属性的浏览器通过JS进行辅助支持。

注：Sass版中，提供了 placeholder($color) mixin，方便设置placeholder的文本色