浏览器PlaceHolder效果

有图有证据

引

经常有同学用到placeholder的兼容（Ie9及以下都不兼容。。。） ，网上一搜各种高大上的代码，下面是mark童鞋敲的（如有雷同，纯属所见略同，并非有意抄袭。。。），以下代码的原理是：

用div将input包裹，并添加一个内容为input的placeholder值的span；
然后点击span或者鼠标移入input，将span隐藏；
否则如果input无内容输入，将显示span

代码中涉及到css，可以根据自己的使用场景加以修改。

效果

查看效果
由于网站发布问题，此链接有可能会失效。

上代码，别想歪

var JPlaceHolder = {
    //检测
    _check: function() {
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init: function() {
        if (!this._check()) {
            this.fix();
        }
    },
    //修复
    fix: function() {
        jQuery(':input[placeholder]').each(function(index, element) {
            var self = $(this),
                txt = self.attr('placeholder');
            if(txt){
                self.wrap($('<div></div>').css({ position: 'relative', zoom: '1', width: self.outerWidth(true), display: self.css('display') }));
                var h = self.outerHeight(true),
                    paddingleft = self.css('padding-left');
                var holder = $('<span></span>').text(txt).css({ position: 'absolute', left: paddingleft, top: 0, height: h, 'line-Height': h + 'px', color: '#666' }).appendTo(self.parent());
                self.focusin(function(e) {
                    holder.hide();
                }).focusout(function(e) {
                    if (!self.val()) {
                        holder.show();
                    }
                });
                holder.click(function(e) {
                    holder.hide();
                    self.focus();
                });
            }
        });
    }
};
//执行
jQuery(function() {
    JPlaceHolder.init();
});

placeholder字体设置：

ps:转自本人另一篇文章

input[type="text"]::-webkit-input-placeholder{color:red;opacity:1;}
input[type="text"]:-moz-placeholder{color:red;opacity:1;}
input[type="text"]::-moz-placeholder{color:red;opacity:1;}
input[type="text"]:-ms-input-placeholder{color:red;opacity:1;}

解析：

placeholder存在兼容性问题，只有支持placeholder的浏览器才可以设置其样式；
opacity:为透明度；默认半透明；取值范围0-1；
placeholder的字体继承数据框的样式；
例如：input{font-size: 22px;} 则placeholder的字号为22px
不支持placeholder的浏览器要定义类似的效果，需要自己用dom模拟

---

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。