Layui中的select下拉框,在IE8下,文本框不回显问题的解决

最近使用layui 在IE8下遇到了一个问题,就是当

<option value="" selected>全部</option>

value为“” 时,文本信息不会回显,也是查阅了一些资料,最终也算是解决了,以此文记录这个问题,

首先,问题的原因是IE8对placeholder属性的不兼容导致

解决:

1.引入一个js,处理placeholder的不兼容问题 ,js文件的下载地址:http://www.bootcdn.cn/jquery-placeholder/

2.修改layui.all.js,我这里修改了 form.render()方法,在方法的最后加入 $('input').placeholder();,此处解决的是页面初次加载

u.prototype.render = function(e) {
    var n = this,
    i = n.config,
    r = n.type(),
    u = n.view();
    2 === r ? i.elem && (i.elem.innerHTML = u) : 3 === r ? i.elem.html(u) : a[t](i.elem) && (a[t](i.elem).innerHTML = u),
    i.jump && i.jump(i, e);
    var s = a[t]("layui-laypage-" + i.index);
    n.jump(s),
    i.hash && !e && (location.hash = "!" + i.hash + "=" + i.curr),
    n.skip(s);
    $('input').placeholder();
}

3.处理当select值变化后,再次选择全部时不回显问题,在方法的最后加入 $('input').placeholder();因为我遇到的是 select 选项框,所以我只在 select渲染后加了,大家根据需求加入即可

u.prototype.render = function(e, i) {
    var n = this,
    u = t(r +
    function() {
        return i ? '[lay-filter="' + i + '"]': ""
    } ()),
    d = {
        select: function() {
            var e, i = "请选择",
            a = "layui-form-select",
            n = "layui-select-title",
            r = "layui-select-none",
            d = "",
            f = u.find("select"),
            v = function(i, l) {
                t(i.target).parent().hasClass(n) && !l || (t("." + a).removeClass(a + "ed " + a + "up"), e && d && e.val(d)),
                e = null
            },
            y = function(i, u, f) {
                var y, p = t(this),
                m = i.find("." + n),
                k = m.find("input"),
                g = i.find("dl"),
                x = g.children("dd"),
                b = this.selectedIndex;
                if (!u) {
                    var C = function() {
                        var e = i.offset().top + i.outerHeight() + 5 - h.scrollTop(),
                        t = g.outerHeight();
                        b = p[0].selectedIndex,
                        i.addClass(a + "ed"),
                        x.removeClass(o),
                        y = null,
                        x.eq(b).addClass(s).siblings().removeClass(s),
                        e + t > h.height() && e >= t && i.addClass(a + "up"),
                        T()
                    },
                    w = function(e) {
                        i.removeClass(a + "ed " + a + "up"),
                        k.blur(),
                        y = null,
                        e || $(k.val(),
                        function(e) {
                            var i = p[0].selectedIndex;
                            e && (d = t(p[0].options[i]).html(), 0 === i && d === k.attr("placeholder") && (d = ""), k.val(d || ""))
                        })
                    },
                    T = function() {
                        var e = g.children("dd." + s);
                        if (e[0]) {
                            var t = e.position().top,
                            i = g.height(),
                            a = e.height();
                            t > i && g.scrollTop(t + g.scrollTop() - i + a - 5),
                            t < 0 && g.scrollTop(t + g.scrollTop() - 5)
                        }
                    };
                    m.on("click",
                    function(e) {
                        i.hasClass(a + "ed") ? w() : (v(e, !0), C()),
                        g.find("." + r).remove()
                    }),
                    m.find(".layui-edge").on("click",
                    function() {
                        k.focus()
                    }),
                    k.on("keyup",
                    function(e) {
                        var t = e.keyCode;
                        9 === t && C()
                    }).on("keydown",
                    function(e) {
                        var t = e.keyCode;
                        9 === t && w();
                        var i = function(t, a) {
                            var n, l;
                            e.preventDefault();
                            var r = function() {
                                var e = g.children("dd." + s);
                                if (g.children("dd." + o)[0] && "next" === t) {
                                    var i = g.children("dd:not(." + o + ",." + c + ")"),
                                    n = i.eq(0).index();
                                    if (n >= 0 && n < e.index() && !i.hasClass(s)) return i.eq(0).prev()[0] ? i.eq(0).prev() : g.children(":last")
                                }
                                return a && a[0] ? a: y && y[0] ? y: e
                            } ();
                            return l = r[t](),
                            n = r[t]("dd:not(." + o + ")"),
                            l[0] ? (y = r[t](), n[0] && !n.hasClass(c) || !y[0] ? (n.addClass(s).siblings().removeClass(s), void T()) : i(t, y)) : y = null
                        };
                        38 === t && i("prev"),
                        40 === t && i("next"),
                        13 === t && (e.preventDefault(), g.children("dd." + s).trigger("click"))
                    });
                    var $ = function(e, i, a) {
                        var n = 0;
                        layui.each(x,
                        function() {
                            var i = t(this),
                            l = i.text(),
                            r = l.indexOf(e) === -1; ("" === e || "blur" === a ? e !== l: r) && n++,
                            "keyup" === a && i[r ? "addClass": "removeClass"](o)
                        });
                        var l = n === x.length;
                        return i(l),
                        l
                    },
                    q = function(e) {
                        var t = this.value,
                        i = e.keyCode;
                        return 9 !== i && 13 !== i && 37 !== i && 38 !== i && 39 !== i && 40 !== i && ($(t,
                        function(e) {
                            e ? g.find("." + r)[0] || g.append('<p class="' + r + '">无匹配项</p>') : g.find("." + r).remove()
                        },
                        "keyup"), "" === t && g.find("." + r).remove(), void T())
                    };
                    f && k.on("keyup", q).on("blur",
                    function(i) {
                        var a = p[0].selectedIndex;
                        e = k,
                        d = t(p[0].options[a]).html(),
                        0 === a && d === k.attr("placeholder") && (d = ""),
                        setTimeout(function() {
                            $(k.val(),
                            function(e) {
                                d || k.val("")
                            },
                            "blur")
                        },
                        200)
                    }),
                    x.on("click",
                    function() {
                        var e = t(this),
                        a = e.attr("lay-value"),
                        n = p.attr("lay-filter");
                        return ! e.hasClass(c) && (e.hasClass("layui-select-tips") ? k.val("") : (k.val(e.text()), e.addClass(s)), e.siblings().removeClass(s), p.val(a).removeClass("layui-form-danger"), layui.event.call(this, l, "select(" + n + ")", {
                            elem: p[0],
                            value: a,
                            othis: i
                        }), w(!0), !1)
                    }),
                    i.find("dl>dt").on("click",
                    function(e) {
                        return ! 1
                    }),
                    t(document).off("click", v).on("click", v)
                }
            };
            f.each(function(e, l) {
                var r = t(this),
                o = r.next("." + a),
                u = this.disabled,
                d = l.value,
                f = t(l.options[l.selectedIndex]),
                v = l.options[0];
                if ("string" == typeof r.attr("lay-ignore")) return r.show();
                var h = "string" == typeof r.attr("lay-search"),
                p = v ? v.value ? i: v.innerHTML || i: i,
                m = t(['<div class="' + (h ? "": "layui-unselect ") + a, (u ? " layui-select-disabled": "") + '">', '<div class="' + n + '">', '<input type="text" placeholder="' + p + '" ' + ('value="' + (d ? f.html() : "") + '"') + (!u && h ? "": " readonly") + ' class="layui-input' + (h ? "": " layui-unselect") + (u ? " " + c: "") + '">', '<i class="layui-edge"></i></div>', '<dl class="layui-anim layui-anim-upbit' + (r.find("optgroup")[0] ? " layui-select-group": "") + '">',
                function(e) {
                    var t = [];
                    return layui.each(e,
                    function(e, a) {
                        0 !== e || a.value ? "optgroup" === a.tagName.toLowerCase() ? t.push("<dt>" + a.label + "</dt>") : t.push('<dd lay-value="' + a.value + '" class="' + (d === a.value ? s: "") + (a.disabled ? " " + c: "") + '">' + a.innerHTML + "</dd>") : t.push('<dd lay-value="" class="layui-select-tips">' + (a.innerHTML || i) + "</dd>")
                    }),
                    0 === t.length && t.push('<dd lay-value="" class="' + c + '">没有选项</dd>'),
                    t.join("")
                } (r.find("*")) + "</dl>", "</div>"].join(""));
                o[0] && o.remove(),
                r.after(m),
                y.call(this, m, u, h);
				$('input').placeholder()
            })
        },

最后一步,给页面的select 加入监听

form.on('select', function(data){
            form.render();
        });

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值