JavaScript: how to smoke IE10, or migration problems

Author's digression: Do not throw stones at those who fell to write under different browsers!
In my work, due to the use of ActiveX components, only IE is currently supported. Therefore, the following discussion applies only to different versions of IE.

IE10 is a special browser. Much of what was true for previous versions of IE has stopped working.
Only JavaScript errors that occurred during legacy code migration are considered. The difference in CSS is beyond the scope of this article.

So, below is a list of typical errors in IE10 that occur during the transition from older versions of IE.

1. Cross to clear the field

')
In IE10, when entered into a text field, a cross appears, intended to clear the field (except for small fields).

In the case when online validation of form fields is used, as well as any other changes depending on the value of the field, this promises a number of problems. They are connected with the fact that clearing a field when pressing the cross is an input event. However, the change event (as well as keydown, keypress, and keyup) does not occur. More precisely, it happens only when the focus is lost. With all the consequences, because This is not the expected behavior for the user (from the point of view of the usual event handling).

At the same time, you can hide this cross using CSS only in IE10 document mode:

.someinput::-ms-clear { display: none; width: 0; height: 0; } 

In compatibility mode, this feature is not available. It remains to catch mousedown / mouseup and check whether the field value has changed after the click. Pretty sad (although it works).

2. No XPath?

In IE10, the responseXml property of the ActiveXObject object ('MSXML2.XMLHTTP') now returns not IXMLDocument, but a Document that does not have selectSingleNode and selectNodes methods that work with XPath (see the source ).

The output is to set the responseType:

 if (window.XMLHttpRequest) { try { ajaxXHR.responseType = "msxml-document"; } catch (e) { // ignore } } 

At the same time, one should not forget that document version 3.0 is being returned, whereas in old versions document version 2.0 was returned. Documents of different versions are not compatible with each other.

3. In the DOM-model can not add custom-properties

Instead, use custom attributes (getAttribute () / setAttribute ()). At the same time, when a custom attribute is added to a tag, it becomes accessible via getAttribute ().

It must be remembered that custom attributes must be strings, not objects. In IE10, the objects passed to setAttribute () are converted to a string.

4. event.returnValue not supported

Instead, use preventDefault:

 if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } 

---

If anyone has met with other features of IE10 when migrating JavaScript code - I will be happy to add to the article, write in the comments.