Question

这是我的代码：

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

我在（iPhone 4，Android，iPad）中测试过的所有HTML5移动浏览器都将其渲染为输入类型=文本。为什么不渲染滑块？

Answer 1

并非所有浏览器都支持它。您始终可以使用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);  
            }  
        });  
    });  
};

Answer 2

根据this post，它没有在iOS 4.2中实现，也没有在Android 2.3中完全实现（无论这意味着什么）。我在iOS 4.3上进行了测试，看起来它还没有用于移动游猎。

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

Answer 3

在iOS 5中添加了对输入类型=“范围”的支持，因此您将在iOS 5中获得滑块，但之前不会。

Answer 4

基于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" />';

希望它有所帮助。

输入类型显示文本框而不是滑块的范围

4 个答案: