最近使用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();
});