web-dev-qa-db-fra.com

Le curseur de plage d'entrée ne fonctionne pas sur iOS Safari lorsque vous cliquez sur la piste

J'ai un curseur d'entrée de plage assez simple. Cela fonctionne assez bien sur tous les navigateurs, sauf sur iOS Safari.

Le principal problème que j'ai est que lorsque je clique sur la piste du curseur, il ne déplace pas le curseur. Il met simplement en surbrillance le curseur. Cela fonctionne bien lorsque vous faites glisser le pouce. Des idées pour résoudre le problème?

<div class="slider-wrap">
    <div id="subtractBtn"></div>
    <input type="range" class="slider">
    <div id="addBtn"></div>
</div>
ioshtmlmobile-safari
48
Jan Swart

Version améliorée de la solution présentée par Cameron Gilbert. Cette implémentation fonctionne pour les curseurs avec une valeur minimale définie sur un nombre négatif et facultative un ensemble de taille de pas.

Pour ceux qui ne travaillent pas avec TypeScript, je vous laisse le soin de convertir en Javascript simple.

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

}

0
Williwyg

Safari 5.1 + devrait pleinement prendre en charge le type "range" - donc c'est bizarre que cela ne fonctionne pas. avez-vous essayé d'ajouter des valeurs min/max/pas? qu'en est-il d'essayer d'utiliser uniquement l'attribut HTML pur sans aucune classe qui pourrait interférer - essayez de coller ce code et de l'exécuter sur un navigateur Safari

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

  • cela devrait fonctionner - si c'est le cas, c'est probablement quelque chose de lié à votre CSS, sinon essayez d'utiliser l'un des exemples HTML purs ici:

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

0
Yulian Amstislavski

Ajoutez la propriété CSS, -webkit-tap-highlight-color: transparent au CSS de l'élément ou à la page html complète. Cela supprimera l'effet de surbrillance gênant sur un élément lorsqu'il est tapé sur un appareil mobile.

0
Animan