JavaScript: как правильно курить IE10, или проблемы миграции

Авторское отступление: Не закидывайте камнями те, кому выпало писать под разные браузеры!

В моей работе из-за использования ActiveX-компонентов сейчас поддерживается только IE. Поэтому дальнейшее изложение касается только различных версий IE.

IE10 — это особый браузер. Многое из того, что было верно для предыдущий версий IE, перестало работать.

Рассматриваются только ошибки JavaScript, возникшие при миграции legacy-кода. Различие в CSS выходит за рамки данной статьи.

Итак, ниже представлен перечень типичных ошибок в IE10, возникающих при переходе со старых версий IE.

1. Крестик для очистки поля

В IE10 при вводе в текстовое поле появляется крестик, предназначенный для очистки поля (кроме маленьких полей).

В случае, когда используется онлайн-валидация полей форм, а также любые другие изменения в зависимости от значения поля, это сулит некоторое количество проблем. Они связаны с тем, что очистка поля при нажатии крестика — это событие input. При этом события change (а также keydown, keypress и keyup), не происходит. Со всеми вытекающими.

При этом скрыть этот крестик с использованием CSS можно только в режиме документов IE10:

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

В режиме совместимости эта возможность отсутствует. Остается ловить mousedown/mouseup и проверять, не изменилось ли значение поля после клика. Довольно печально (хотя это и работает).

2. Нет XPath?

В IE10 свойство responseXml объекта ActiveXObject('MSXML2.XMLHTTP') теперь возвращает не IXMLDocument, а Document, у которого нет методов selectSingleNode и selectNodes, работающих с XPath (см. источник).

Выход состоит в задании responseType:

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

При этом надо не забыть, что возвращается документ версии 3.0, тогда как в старых версиях возвращался документ версии 2.0. Документы разных версий не совместимы между собой.

3. В DOM-модель нельзя добавлять custom-свойства

Вместо них используем custom-атрибуты (getAttribute()/setAttribute()). При этом при добавлении custom-атрибута к тегу он становится доступным через getAttribute().

Необходимо помнить, что custom-атрибуты должны быть строками, а не объектами. В IE10 объекты, переданные в setAttribute(), конвертируется в строку.

4. event.returnValue не поддерживаются

Вместо этого используем preventDefault:

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

---

Если кто-нибудь встречался с другими особенностями IE10 при мигрировании JavaScript-кода — буду рад добавить к статье, пишите в комментариях.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html