Как мне создать изящно деградирующий диапазон HTML5?
-
20-09-2019 - |
Вопрос
Я хотел бы использовать <input type='range' />
из HTML5 для браузеров, которые его поддерживают, и деградируют до <select />
если не.Я использую Ruby-on-Rails, поэтому, если все остальное не удастся, я мог бы сделать что-то вроде этот на стороне сервера.
Однако я бы предпочел иметь что-то более близкое к идее прогрессивного улучшения, реализуемого с помощью Javascript.Бонусные баллы, если это JQuery.
Решение
Проверить Модернизр, он сообщит вам, поддерживается ли диапазон.Я считаю, что метод заключается в том, чтобы создать ввод диапазона и проверить его тип — если это все еще «диапазон», то он поддерживается.В противном случае он должен сообщить «текст», который является резервным вариантом в других браузерах.
Другие советы
Сначала определите, может ли браузер обрабатывать HTML 5, а затем используйте что-то вроде этого:
$('input').each(function (i, item) {
if ($(item).attr('min') !== undefined && $(item).attr('max') !== undefined) {
var select = document.createElement("SELECT");
$(select).attr('name', $(item).attr('name'));
$(select).attr('id', $(item).attr('id'));
$(select).attr('disabled', $(item).attr('disabled'));
var step = 1;
if ($(item).attr('step') !== undefined) {
step = parseFloat($(item).attr('step'));
}
var min = parseFloat($(item).attr('min'));
var max = parseFloat($(item).attr('max'));
var selectedValue = $(item).attr('value');
for (var x = min; x <= max; x = x + step) {
var option = document.createElement("OPTION");
$(option).text(x).val(x);
if (x == selectedValue) { $(option).attr('selected', 'selected'); }
$(select).append(option);
};
$(item).after(select);
$(item).remove();
}
});
Поскольку вы не можете использовать input[type=range]
селектор, мне пришлось использовать $(item).attr('min') && $(item).attr('min')
подход, это будет немного странно, если у вас есть другие типы элементов управления вводом с этими двумя атрибутами.