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