Strange IE11 form fields bug after selecting from dropdown

问题

I'm experiencing a major bug in IE 11 (latest version 11.0.9600.16521 on Windows 7). When on any form if I open a select dropdown all the other form fields on the page freeze. I can 'unfreeze' them by adjusting the Window size (causing a redraw). This seems to happen on any form what-so-ever.

To reproduce: Open IE 11.0.9600.16521 Go to http://www.wikipedia.org/ Select any language from the language dropdown

Result: language dropdown does not appear to get updated on the screen the search box appears to be frozen - i.e. focus on select box and start typing but no text appears. However if you adjust the window size the form fields are updated and go back to working as normal (until you interact with another select element)

I can't find much in Google for this issue so maybe it's just something specific to my settings. Only thing that sounds somewhat similar to what I'm experiencing is this: http://connect.microsoft.com/IE/feedback/details/806679/ie-11-desktop-selecting-an-item-from-a-drop-down-list-on-a-webpage-causes-the-tab-to-crash. Anyone else able to reproduce this?

回答1:

I had a similar issue with IE11 that turned out to be any modification to the .text property of an SELECT-option element. I eventually found the "hint" on stackoverflow here How to fix IE select issue when dynamically changing options.

In my case I use straight JavaScript, and with so many inter-dependent SELECT boxes had to come up with a generic solution, so my solution was to intercept (defineGetter) assignment to any .text property of an HTMLOptionElement, and set a 1 ms timer to perform an add element and remove element as in the referenced post that is titled "I have the fix. We have to add and remove options list to trigger the rendering in IE8." Notice the reference to IE8, AFAIK IE has had several issues with SELECT boxes since at least IE7, possibly earlier.

So the code I added to one of my global scripts is as follows:

try { var IE11;  // IE10 and IE11 removed ActiveXObject from the window object but it can still be instantiated
    IE11 = new ActiveXObject('MSXML2.DOMDocument.6.0');
    IE11 = null;
    if (typeof(HTMLOptionElement) != "undefined") {
        try { HTMLOptionElement.prototype.__defineSetter__(
                                          'text',
                                          function(original) {
                                              return function(newValue) { var sel;
                                                                       original.call(this, newValue);
                                                                       if (!(sel=this.parentElement).fixIE) sel.fixIE = window.setTimeout(_fixIE_(sel), 1);
                                                                   }
                                                               }(HTMLOptionElement.prototype.__lookupSetter__('text')));
            } catch(e) {};
        }
    } catch(e) {}
}

//  IE11 broke SELECT boxes again, modifying any options .text attribute "freezes" the SELECT so it appears disabled
function _fixIE_(selBox) {
    return _fixIE_;
    function _fixIE_(){ var lc = selBox.options.length;
        selBox.options.add(new Option('',''));
        selBox.options.remove(lc);
        selBox.fixIE = undefined;
    }
}

Phil