輸入類型範圍示出文本框代替滑塊

這是我的代碼：輸入類型範圍示出文本框代替滑塊

<input type="range" name="slider" id="slider" value="5" min="0" max="10" step="1" />

我已經在測試此所有HTML5移動瀏覽器（iPhone 4，機器人，ipad公司）呈現此作爲輸入類型=文本。爲什麼這不會呈現滑塊？

來源

2011-05-01 Jarred

並非所有的瀏覽器都支持它。您始終可以使用http://www.modernizr.com/來測試瀏覽器是否支持它，然後使用http://jqueryui.com/作爲回退。嘗試這樣的事情。

var initSlider = function() { 
    $('input[type=range]').each(function() { 
     var $input = $(this); 
     var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>'); 
     var step = $input.attr('step'); 

     $input.after($slider).hide(); 

     $slider.slider({ 
      min: $input.attr('min'), 
      max: $input.attr('max'), 
      step: $input.attr('step'), 
      change: function(e, ui) { 
       $(this).val(ui.value); 
      } 
     }); 
    }); 
};

來源

2011-05-01 14:52:38 awesomesyntax

我現在使用jQuery UI作爲滑塊。但是，這不支持在觸摸瀏覽器中拖動滑塊手柄。 jQuery手機建議使用範圍表單元素。 http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-slider.html關於如何獲得滑動手柄在移動瀏覽器上工作的任何建議？ – Jarred 2011-05-01 15:00:44

奇怪的移動Safari瀏覽器似乎實現該屬性，但顯示爲文本。這導致我的應用程序中的錯誤，因爲我測試如果屬性「範圍」的作品，如果沒有取代它與選擇框。但在iPhone/iPad上，它不會被選擇框取代，而是會顯示一個帶普通鍵盤的文本框（例如輸入類型文本）。 – 2011-06-20 09:55:27

根據this post它不是在iOS 4.2的實現，並在Android 2.3的未完全實現（這意味着什麼）。我在iOS 4.3上測試過，看起來它還沒有實現移動Safari。

<input type="number"似乎也不工作。

來源

2011-05-01 14:53:47

此後，在iOS 5中添加了對輸入類型=「範圍」的支持，因此您將在iOS 5中獲得滑塊，但之前不會。

來源

2012-02-03 13:48:50

基於Modernizr的，以測試輸入類型的最佳方式=「範圍」的兼容性將是：

var i = document.createElement("input"), safe = false; 
     i.setAttribute("type", "range"); 

     if(i.type !== "text"){ 
      i.value = ':)'; 
      i.style.cssText = 'position:absolute;visibility:hidden;'; 

      if (i.style.WebkitAppearance !== undefined) { 

       document.documentElement.appendChild(i); 
       defaultView = document.defaultView; 
       safe = defaultView.getComputedStyle && 
         defaultView.getComputedStyle(i, null).WebkitAppearance !== 'textfield' && 
         (i.offsetHeight !== 0); 

       document.documentElement.removeChild(i); 

      } 
     } 

     return safe? '<input type="range" />': '<input type="number" />';

希望它能幫助。

來源

2014-02-11 19:24:19 nicoabie

輸入類型範圍示出文本框代替滑塊

回答

相關問題