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

问题描述

| 这是我的代码：

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

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

解决方法

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

    ,根据这篇文章，它没有在iOS 4.2中实现，也没有在Android 2.3中完全实现（无论如何）。我曾在iOS 4.3上进行过测试，但看起来仍未针对移动Safari实施。

<input type=\"number\"

似乎也不起作用。     ,此后，在iOS 5中添加了对输入type = \“ range \”的支持，因此您将在iOS 5中获得滑块，但之前没有。     ,基于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\" />\';

希望能帮助到你。