Тип ввода Диапазон, показывающий текстовое поле вместо ползунка - PullRequest
Новая
       0

Тип ввода Диапазон, показывающий текстовое поле вместо ползунка

2 голосов
/ 01 мая 2011

Вот мой код: 

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

Все мобильные браузеры HTML5, в которых я это тестировал (iPhone 4, Android, iPad), отображают это как тип ввода = текст. Почему это не рендер слайдер?

Ответы [ 4 ]

1 голос
/ 01 мая 2011

Согласно этому посту он не реализован в iOS 4.2 и не полностью реализован в Android 2.3 (что бы это ни значило).Я провел тестирование на iOS 4.3, и похоже, что оно до сих пор не реализовано для мобильного сафари.

<input type="number", похоже, тоже не работает.

1 голос
/ 01 мая 2011

Не все браузеры пока поддерживают его.Вы всегда можете использовать 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);  
            }  
        });  
    });  
};
0 голосов
/ 11 февраля 2014

Основываясь на 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" />';

Надеюсь, это поможет.

0 голосов
/ 03 февраля 2012

Поддержка ввода типа = "диапазон" с тех пор была добавлена ​​в iOS 5, поэтому вы получите ползунок в iOS 5, но не раньше.

...