如何构建优雅降级的HTML5范围？

我想将HTML5中的用于支持它的浏览器，如果没有，则降级为 。 我正在使用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')方法，这将得到一点点如果您有其他类型的输入控件具有这两个属性，则很奇怪。