如何构建优雅降级的 HTML5 Range？

Question

我想将 HTML5 中的 <input type='range' /> 用于支持它的浏览器，如果不支持它，则降级为 <select />。我正在使用 Ruby-on-Rails，所以其他一切都失败了，我可以在服务器端执行类似 this 的操作。

不过，我更希望有一些更符合通过 Javascript 完成的渐进增强的想法。如果是 JQuery，则加分。

Answer 1

查看Modernizr，它会告诉您是否支持范围。我相信该技术是创建一个范围输入并检查它的类型——如果它仍然是“范围”，那么它是受支持的。否则它应该报告“文本”，这是其他浏览器的后备。

Answer 2

首先检测浏览器是否可以处理 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') 方法，如果您有其他类型的具有这两个属性的输入控件，这会有点奇怪。