Internet Explorer improved a lot in the last 3 years and since IE 10 has become a fairly decent browser with good performances. But, even with these improvements, web developers still have to:
- deal with older versions, in particular IE8 or even IE7;
- work around bugs the IE drags since forever, like the unimplemented
document.evaluate, oroninputevent that isn't fired on deletion or oncontentEditableelements.
I was asking myself what's an "acceptable" limit for those workarounds. For example, IE<9 change event doesn't bubble up: but since it supports focusin and focusout, which do bubble, it can be fixed with a couple of event listeners.
It's also well known that IE<9 doesn't handle the innerHTML property on <select> elements properly, so we can redefine the property (IE8 only):
(function() {
var re = /^<SELECT(?: [\w:]+=(?:\S+|'[^']*'|"[^"]*"))*>/,
div = document.createElement("div");
Object.defineProperty(HTMLSelectElement.prototype, "innerHTML", {get: function() {
var out = this.outerHTML, m = out.match(re);
return m ? out.slice(m[0].length, -9) : "";
}, set: function(v) {
this.innerText = "";
if (v = String(v)) {
div.innerHTML = "<select>" + v + "</select>";
var s = div.firstChild;
while (s.firstChild) this.appendChild(s.firstChild);
}
}});
})();
But IE - even IE11! - still doesn't allow to dynamically set the value property of a <select> element, so (IE8-11):
Object.defineProperty(HTMLSelectElement.prototype, "value", {get: function() {
var opt = this.selectedIndex >= 0 ? this.options[this.selectedIndex] : null;
return opt ? opt.value : "";
}, set: function(val) {
val = String(val);
var ops = this.options, i = ops.length;
while (i--) if (ops[i].value === val) break;
this.selectedIndex = i;
}});
These work quite well, maybe a bit slower but just in a resticted case: HTMLSelectElements. And they rarely can represent a performance issue.
But since I'm changing some basic DOM properties, I was wondering if there could be any problems that I'm not sighting. Does anyone have an idea?