Проверка

Для того чтобы проверить, есть ли в браузере встроенная поддержка типов ввода, нужен прием, похожий на проверку на поддержку атрибута. Опять же вам нужно будет создать в памяти «фантомный» элемент input. Затем вы устанавливаете атрибут type на то значение, которое хотите проверить.

После этого вы запрашиваете значение свойства type, и если получаете значение “text”, то вы знаете, что браузер не поддерживает то значение, которое вы установили.

Вот примерный код, хотя я уверен, что вы можете написать и что-то гораздо более элегантное:

function inputSupportsType(test) {

var input = document.createElement('input');

input.setAttribute('type',test);

if (input.type == 'text') {

return false;

} else {

return true;

}

}

Теперь вы можете использовать эту функцию, чтобы удостовериться, что JavaScript-widget будет исполняться только в тех браузерах, которые не поддерживают определенный тип элемента как встроенный:

if (!inputSupportsType(‘range’)) {

// Код запасного решения на JavaScript.

}

Встроенный в браузер элемент ввода будет, разумеется, грузиться быстрее, чем решение на JavaScript, которому нужно ждать, пока загрузится вся DOM. Встроенный в браузер элемент управления будет также более доступен для технологий специальных возможностей, чем элемент, который написан на JavaScript, хотя – что весьма странно – элементом range в Safari на данный момент нельзя управлять с клавиатуры!