placeholder兼容方法(兼容IE8以上浏览器)

//placeholder兼容方法(兼容IE8以上浏览器)
            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');
                        self.wrap($('<div></div>').css({
                            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');
//此处的css样式,根据情况修改
var holder = $('<span></span>').text(txt).css({ position: 'absolute', left: pos.left, // top: pos.top, height: h + 'px', lineHeight: h + 'px', paddingLeft: paddingleft, color: '#aaa', paddingTop: '15px', textAlign: 'center', width: '347px' }).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(); }); }); } }; //执行placeholder兼容方法 jQuery(function () { JPlaceHolder.init(); });

 

posted on 2016-07-18 09:58  cag2050  阅读(393)  评论(0编辑  收藏  举报

导航