![](/img/trans.png)
[英]Safari ios (iphone and ipad) working properly only when clicking in devtools
[英]Input range slider not working on iOS Safari when clicking on track
我有一个非常简单的范围输入滑块。 它在除 iOS Safari 之外的所有浏览器上都运行良好。
我遇到的主要问题是当我单击滑块轨道时,它不会移动滑块。 它只是突出显示滑块。 拖动拇指时它工作正常。 有想法该怎么解决这个吗?
<div class="slider-wrap">
<div id="subtractBtn"></div>
<input type="range" class="slider">
<div id="addBtn"></div>
</div>
对于那些仍在寻找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" />
添加 CSS 属性-webkit-tap-highlight-color: transparent
对元素的 CSS 或整个 html 页面-webkit-tap-highlight-color: transparent
。 这将消除在移动设备上点击元素时麻烦的高亮效果。
从http://touchpunch.furf.com/添加jQuery UI触控功能
Safari 5.1 + 应该完全支持“范围”类型 - 所以它不起作用很奇怪。 您是否尝试添加最小/最大/步长值? 尝试只使用纯 HTML 属性而不使用任何可能干扰的类会怎样 - 尝试粘贴此代码并在 Safari 浏览器上运行它
<input type="range" min="0" max="3.14" step="any">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
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
}
);
}
尝试使用jQuery Mobile吗? 解决方法是令人讨厌的,我很确定没有办法将本机界面与标准 HTML 一起使用。 从其他线程看来,你可以做一个精心设计的 CSS/JS 解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.