解决思路：创建一个 span 标签 动态加在 input 的元素里面，通过定位设置其位置。

代码

    var JPlaceHolder = {
        //检测
        _check: function() {
            return 'placeholder' in document.createElement('input');
        },
        //初始化
        init: function() {
            if(!this._check()) {
                this.fix();
            }
        },
        //修复
        fix: function() {
            jQuery(':input[placeholder],textarea[placeholder]').each(function(index, element) {
                var self = $(this),
                    txt = self.attr('placeholder');
                self.wrap($('<div></div>').css({
                    // display:'inline-block',
                    position: 'relative',
                    zoom: '1',
                    border: 'none',
                    background: 'none',
                    padding: 'none',
                    margin: 'none'
                }));
                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
                var holder = $('<span></span>').text(txt).css({
                    position: 'absolute',
                    left: pos.left,
                    top: pos.top,
                    "z-index":"9999",
                    height: h,
                    lineHeight: h +"px",
                    paddingLeft: paddingleft,
                    color: '#aaa'
                }).appendTo(self.parent());
                self.focusin(function(e) {
                    holder.hide();
                }).focusout(function(e) {
                    setInterval(function () {
                        if(!self.val()) {
                            holder.show();
                        }else{
                            holder.hide();
                        }
                    },300);

                });
                holder.click(function(e) {
                    holder.hide();
                    self.focus();
                });
            });
        }

调用方式

JPlaceHolder.init();

效果

input placeholder效果图.png