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

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')的做法，这将得到一个有点怪异如果您有这两个属性的其他类型的输入控件。