html5-单击时,输入范围滑块在iOS Safari上不起作用

我有一个非常简单的范围输入滑块。 除了iOS Safari以外,它在所有浏览器上都能很好地运行。

我遇到的主要问题是,当我单击滑块轨道时,它不会移动滑块。 它只是突出显示滑块。 拖动拇指时效果很好。 有想法该怎么解决这个吗?

<div class="slider-wrap">
    <div id="subtractBtn"></div>
    <input type="range" class="slider">
    <div id="addBtn"></div>
</div>
worker11811 asked 2020-07-31T02:47:44Z
3个解决方案
0 votes

将CSS属性-webkit-tap-highlight-color: transparent添加到元素的CSS或完整的html页面。 当在移动设备上点击某个元素时,这将消除麻烦的突出显示效果。

Animan answered 2020-07-31T02:48:00Z
0 votes

Safari 5.1 +应该完全支持“范围”类型-因此很奇怪,它无法正常工作。您是否尝试添加最小/最大/步长值? 尝试仅使用纯HTML属性而不使用任何可能会干扰的类的方法-尝试粘贴此代码并在Safari浏览器中运行

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

  • 它应该可以正常工作-如果可以,则可能与您的CSS有关,如果不尝试在此处使用纯HTML示例之一:

[HTTPS://developer.Mozilla.org/恩-US/docs/Web/HTML/element/input/range]

Yulian Amstislavski answered 2020-07-31T02:48:29Z
-2 votes

尝试使用jQuery Mobile? 解决方法令人讨厌,我很确定没有办法将本机接口与标准HTML结合使用。 从其他线程看来,您可以做一个精致的CSS / JS解决方案。

answered 2020-07-31T02:48:49Z
translate from https://stackoverflow.com:/questions/33343854/input-range-slider-not-working-on-ios-safari-when-clicking-on-track