單擊軌道時，輸入范圍滑塊在 iOS Safari 上不起作用

Question

我有一個非常簡單的范圍輸入滑塊。 它在除 iOS Safari 之外的所有瀏覽器上都運行良好。

我遇到的主要問題是當我單擊滑塊軌道時，它不會移動滑塊。 它只是突出顯示滑塊。 拖動拇指時它工作正常。 有想法該怎么解決這個嗎？

<div class="slider-wrap">
    <div id="subtractBtn"></div>
    <input type="range" class="slider">
    <div id="addBtn"></div>
</div>

Answer 1

對於那些仍在尋找javascript 的人來說，只能像我一樣修復。 我最終只是為此制作了一個“polyfill”； 它依賴於滑塊的 max 屬性並確定在 iOS 上強制輸入范圍的最佳步驟。 您可以稍后感謝我 ：）

 var diagramSlider = document.querySelector(".diagram-bar"); function iosPolyfill(e) { var val = (e.pageX - diagramSlider.getBoundingClientRect().left) / (diagramSlider.getBoundingClientRect().right - diagramSlider.getBoundingClientRect().left), max = diagramSlider.getAttribute("max"), segment = 1 / (max - 1), segmentArr = []; max++; for (var i = 0; i < max; i++) { segmentArr.push(segment * i); } var segCopy = segmentArr.slice(), ind = segmentArr.sort((a, b) => Math.abs(val - a) - Math.abs(val - b))[0]; diagramSlider.value = segCopy.indexOf(ind) + 1; } if (!!navigator.platform.match(/iPhone|iPod|iPad/)) { diagramSlider.addEventListener("touchend", iosPolyfill, {passive: true}); }

 <input type="range" max="6" min="1" value="1" name="diagram selector" class="diagram-bar" />

Answer 2

添加 CSS 屬性-webkit-tap-highlight-color: transparent對元素的 CSS 或整個 html 頁面-webkit-tap-highlight-color: transparent 。 這將消除在移動設備上點擊元素時麻煩的高亮效果。

Answer 3

從http://touchpunch.furf.com/添加jQuery UI觸控功能

Answer 4

Safari 5.1 + 應該完全支持“范圍”類型 - 所以它不起作用很奇怪。 您是否嘗試添加最小/最大/步長值？ 嘗試只使用純 HTML 屬性而不使用任何可能干擾的類會怎樣 - 嘗試粘貼此代碼並在 Safari 瀏覽器上運行它

<input type="range" min="0" max="3.14" step="any">

• 它應該可以工作 - 如果可以，則可能與您的 css 相關，如果沒有，請嘗試使用此處的純 HTML 示例之一：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Answer 5

Cameron Gilbert 提出的解決方案的增強版。 此實現適用於最小值設置為負數和可選步長設置的滑塊。

對於那些不使用打字稿的人，我把它留給你轉換成普通的 javascript。

if (!!navigator.platform.match(/iPhone|iPad|iPod/)) {
mySlider.addEventListener(
    "touchend",
    (touchEvent: TouchEvent) => {
        var element = touchEvent.srcElement as HTMLInputElement;
        if (element.min && element.max && touchEvent.changedTouches && touchEvent.changedTouches.length > 0) {
            const max = Number(element.max);
            const min = Number(element.min);
            let step = 1;
            if (element.step) {
                step = Number(element.step);
            }
            //Calculate the complete range of the slider.
            const range = max - min;

            const boundingClientRect = element.getBoundingClientRect();
            const touch = touchEvent.changedTouches[0];

            //Calculate the slider value
            const sliderValue = (touch.pageX - boundingClientRect.left) / (boundingClientRect.right - boundingClientRect.left) * range + min;

            //Find the closest valid slider value in respect of the step size
            for (let i = min; i < max; i += step) {
                if (i >= sliderValue) {
                    const previousValue = i - step;
                    const previousDifference = sliderValue - previousValue;
                    const currentDifference = i - sliderValue;
                    if (previousDifference > currentDifference) {
                        //The sliderValue is closer to the previous value than the current value.
                        element.value = previousValue.toString();
                    } else {
                        element.value = i.toString();
                    }

                    //Trigger the change event.
                    element.dispatchEvent(new Event("change"));
                    break;
                }
            }
        }
    },
    {
        passive: true
    }
);

}

Answer 6

嘗試使用jQuery Mobile嗎？ 解決方法是令人討厭的，我很確定沒有辦法將本機界面與標准 HTML 一起使用。 從其他線程看來，你可以做一個精心設計的 CSS/JS 解決方案。