placeholder

html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。

(function(){
    //判断是否支持placeholder
    function isPlaceholer(){
        var input = document.createElement('input');
        return "placeholder" in input; 
    }
    //不支持的代码
    if(!isPlaceholer()){
        //创建一个类
        function Placeholder(obj){
            this.input = obj;
            this.label = document.createElement('label');
            this.label.innerHTML = obj.getAttribute('placeholder');
            this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:12px;';
            if(obj.value != ''){
                this.label.style.display = 'none';
            }
            this.init();
        }
        Placeholder.prototype = {
            //取位置
            getxy : function(obj){
                var left, top;
                if(document.documentElement.getBoundingClientRect){
                    var html = document.documentElement, 
                        body = document.body,
                        pos = obj.getBoundingClientRect(),
                        st = html.scrollTop || body.scrollTop,
                        sl = html.scrollLeft || body.scrollLeft,
                        ct = html.clientTop || body.clientTop,
                        cl = html.clientLeft || body.clientLeft;
                    left = pos.left + sl - cl;
                    top = pos.top + st - ct;
                }
                else{
                    while(obj){
                        left += obj.offsetLeft;
                        top += obj.offsetTop;
                        obj = obj.offsetParent;
                    }
                }
                return{
                    left: left,
                    top : top
                }
            },
            //取宽高
            getwh : function(obj){
                return {
                    w : obj.offsetWidth,
                    h : obj.offsetHeight
                }
            },
            //添加宽高值方法
            setStyles : function(obj,styles){
                for(var p in styles){
                    obj.style[p] = styles[p]+'px';
                }
            },
            init : function(){
                var label = this.label,
                    input = this.input,
                    xy = this.getxy(input),
                    wh = this.getwh(input);
                this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left, 'top':xy.top});
                document.body.appendChild(label);
                label.onclick = function(){
                    this.style.display = "none";
                    input.focus();
                }
                input.onfocus = function(){
                    label.style.display = "none";
                };
                input.onblur = function(){
                    if(this.value == ""){
                        label.style.display = "block";
                    }
                };
            }
        }
        var inpColl = document.getElementsByTagName('input'),
            textColl = document.getElementsByTagName('textarea');
        //html集合转化为数组
        function toArray(coll){
            for(var i = 0, a = [], len = coll.length; i < len; i++){
                a[i] = coll[i];
            }
            return a;
        }
        var inpArr = toArray(inpColl),
            textArr = toArray(textColl),
            placeholderArr = inpArr.concat(textArr);
        for (var i = 0; i < placeholderArr.length; i++){
            if (placeholderArr[i].getAttribute('placeholder')){
                new Placeholder(placeholderArr[i]);
            }
        }
    }
})()

html代码

<div>
    <input type="text" placeholder="提示1" /><br>
    <textarea placeholder="提示2" /></textarea><br>
    <input type="text" placeholder="提示3" /><br>
</div>

css代码

div,input,textarea{ margin:0; padding:0;}
div{width:400px; margin:100px auto 0;}
input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 solid; background-color:#fff; padding-left:2px;}
textarea{ height:60px; font-size:12px; resize:none;}

使用：将JS，在页面底部引入，直接使用placeholder属性即可。