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

发布于 2024-11-04 08:52:48 字数 209 浏览 0 评论 0 原文

这是我的代码：

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

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

原文

Here is my code:

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

All HTML5 mobile browsers I have tested this in (iPhone 4, Android, iPad) render this as input type=text. Why won't this render a slider?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野生奥特曼 2024-11-11 08:52:49

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

Not all browsers support it yet. You can always use http://www.modernizr.com/ to test if the browser supports it and then use http://jqueryui.com/ as a fallback. Try something like this.

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);  
            }  
        });  
    });  
};

回复收藏 0 原文

苦妄 2024-11-11 08:52:49

根据这篇文章，它没有在iOS中实现4.2 并没有在 Android 2.3 中完全实现（无论这意味着什么）。我在 iOS 4.3 上进行了测试，看起来它仍然没有针对移动 safari 实现。

似乎也不起作用。

回复收藏 0 原文

冧九 2024-11-11 08:52:49

iOS 5 中添加了对输入 type="range" 的支持，因此您将在 iOS 5 中获得滑块，但之前不会。

回复收藏 0 原文

来世叙缘 2024-11-11 08:52:49

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

希望它有帮助。

Based on Modernizr, the best way to test for input type="range" compatibility would be:

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

Hope it helps.

回复收藏 0 原文

~没有更多了~