placeholder兼容方法（兼容IE8以上浏览器）

最新推荐文章于 2019-10-22 17:48:13 发布

weixin_30832143

最新推荐文章于 2019-10-22 17:48:13 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cag2050/p/5680163.html

本文介绍了一种兼容IE8及以上版本浏览器的placeholder解决方案。通过使用jQuery库，为不支持placeholder属性的浏览器提供了一个polyfill方案，确保了用户体验的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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();
            });