单击曲目时，输入范围滑块在iOS Safari上不起作用
单击曲目时，输入范围滑块在iOS Safari上不起作用
提问于 2015-10-26 18:49:28
我有一个非常简单的范围输入滑块。它在除iOS Safari之外的所有浏览器上都工作得很好。
我遇到的主要问题是，当我单击滑块轨迹时，它不会移动滑块。它只会高亮显示滑块。它在拖动拇指时工作正常。有什么办法解决这个问题吗？
<div class="slider-wrap">
<div id="subtractBtn"></div>
<input type="range" class="slider">
<div id="addBtn"></div>
</div>回答 3
Stack Overflow用户
发布于 2018-08-14 20:22:02
将CSS属性-webkit-tap-highlight-color: transparent添加到元素的CSS或整个html页面。当在移动设备上轻敲元素时，这将消除元素上麻烦的突出显示效果。
Stack Overflow用户
发布于 2020-02-18 20:37:46
卡梅隆·吉尔伯特提出的解决方案的增强版本。此实现适用于最小值设置为负数且设置了可选步长的滑块。
对于那些不使用typescript的人，我把它留给你去转换成普通的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
}
);}
Stack Overflow用户
发布于 2017-11-09 12:07:07
尝试使用jQuery Mobile？这个变通方法是令人讨厌的，而且我非常确定没有办法在标准HTML中使用原生界面。它是从其他线程出现的，你可以做一个精心设计的CSS/JS解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33343854
复制相关文章
相似问题