如何建立一个正常降解HTML5范围？

Question

我想如果不使用从HTML5的<input type='range' />用于支持它的浏览器和降解成一个<select />。我使用的Ruby-on-Rails的，所以失败的一切，我可以做类似这的上服务器侧。

我愿意，但是，有一些与通过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')的做法，这将得到一个有点怪异，如果您有其他类型的输入控制与这两个属性。