정상적으로 성능이 저하되는 HTML5 범위를 어떻게 만듭니 까?

Question

지원하는 브라우저에 HTML5의 <input type='range' />을 사용하고 싶지 않은 경우 <select />으로 저하시키고 싶습니다. Ruby-on-Rails를 사용하고 있기 때문에 서버 측에서 this과 같은 작업을 수행 할 수 있습니다.

그러나 자바 스크립트를 통해 점진적으로 향상시키는 아이디어를 더 선호하는 편이 더 좋습니다. 그것이 JQuery라면 보너스 포인트. 브라우저가 HTML 5는 다음과 같은 것을 사용하여 처리 할 수 ​​있는지

Answer 1

Modernizr을 확인하면 범위가 지원되는지 여부를 알려줍니다. 나는이 기술이 범위 입력을 생성하고 그것이 유형인지를 확인하는 것이라고 믿습니다. 여전히 "범위"라면 지원됩니다. 그렇지 않으면 다른 브라우저의 대체 텍스트 인 "text"를보고해야합니다.

Answer 2

먼저 감지 : 당신은 내가 $(item).attr('min') && $(item).attr('min') 접근 방식으로 가야했다 input[type=range] 선택기를 사용할 수 없기 때문에

$('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(); 
     } 
    }); 

을,이 조금 이상한 얻을 것이다 이 두 속성을 가진 다른 유형의 입력 컨트롤이있는 경우