鍍金池/ 問答/HTML5  HTML/ input type=range iOS手機上無法點擊,但可以拖拽

input type=range iOS手機上無法點擊,但可以拖拽

做了一個進度條,在安卓手機上可以點擊和拖拽,但是在iOS手機上只能拖拽,不能點擊,請教大神這個是怎么一回事? 急!急!急!### 問題描述

鏈接地址:

http://wxqas.yayaim.com:8666/yunzhongku/test/photon/photon-v1.1.0/basic.html?token=18219160086268450&appId=100099&networkStatus=2&phone=18219160086&limitTime=1535099558&soureIp=42.94.11.24:3276&channelId=00

相關代碼

    //HTML結構
    <input type="range" value="0">

<script>

    
    //定義方法
    $.fn.RangeSlider = function (cfg) {
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            val: cfg && Number(cfg.val) ? cfg.val : 0,
            callback: cfg && cfg.callback ? cfg.callback : null
        };

        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var val = this.sliderCfg.val;
        var callback = this.sliderCfg.callback;

        $input.attr('min', min)
            .attr('max', max)
            .attr('step', step)
            .attr('value', val);
        $input.css('background-image', 'linear-gradient(to right, #fb974a 0%, #f76026 ' + (step/max)*100*val + '%, transparent ' + (step/max)*100*val + '%)' );
        // $input.css('background', 'linear-gradient(to right, #059CFA, white ' + (step/max)*100*val + '%, white)');

        $input.bind("input", function (e) {
            // console.log(this.value);
            $input.attr('value', this.value);
            $input.css('background-image', 'linear-gradient(to right, #fb974a 0%, #f76026 ' + (step/max)*100*this.value + '%, transparent ' + (step/max)*100*this.value + '%)');
            if ($.isFunction(callback)) {
                callback(this);
            }
        });
    };
</script>

<script>
    //調用方法
    var change = function ($input) {
        /*內容可自行定義*/
        console.log($($input).val());
    }

    $('input').RangeSlider({
        min: 0,  //最小范圍
        max: 2,  //最大范圍
        step: 1,  //一次移動步數(shù)
        val: 1,  //用戶自定義位置
        callback: change   //回調函數(shù)
    });
</script>

你期待的結果是什么?實際看到的錯誤信息又是什么?

希望iOS跟安卓一樣,也可以點擊

回答
編輯回答
厭遇

ios不支持range屬性

2017年1月30日 12:29