当我玩<input type="range">时,Firefox只有在我们将滑块拖放到Chrome和其他滑块被拖动时触发onchange事件的新位置时才会触发onchange事件。

如何在Firefox中进行拖拽?

function showVal(newVal){ document.getElementById(“valBox”).innerHTML=newVal; } <span id=“valBox”></span> <输入类型=“范围” min=“5” max=“10” step=“1” onchange=“showVal(this.value)”>


当前回答

I'm posting this as an answer in case you are like me and cannot figure out why the range type input doesn't work on ANY mobile browsers. If you develop mobile apps on your laptop and use the responsive mode to emulate touch, you will notice the range doesn't even move when you have the touch simulator activated. It starts moving when you deactivate it. I went on for 2 days trying every piece of code I could find on the subject and could not make it work for the life of me. I provide a WORKING solution in this post.

移动浏览器和混合应用

Mobile browsers run using a component called Webkit for iOS and WebView for Android. The WebView/WebKit enables you to embed a web browser, which does not have any chrome or firefox (browser) controls including window frames, menus, toolbars and scroll bars into your activity layout. In other words, mobile browsers lack a lot of web components normally found in regular browsers. This is the problem with the range type input. If the user's browser doesn't support range type, it will fall back and treat it as a text input. This is why you cannot move the range when the touch simulator is activated.

点击这里阅读更多关于浏览器兼容性的内容

jQuery滑块

jQuery提供了一个滑块,以某种方式与触摸模拟工作,但它是起伏的,不是很光滑。它不能满足我,它可能不会为你,但你可以使它工作更顺利,如果你结合jqueryUi。

最佳解决方案:范围触摸

如果你在笔记本电脑上开发混合应用程序,有一个简单易用的库可以让范围类型输入与触摸事件一起工作。

这个库叫做Range Touch。

DEMO

有关此问题的更多信息,请查看这里的这个线程

为移动Safari (webkit)重新创建HTML5范围输入?

其他回答

你可以使用JavaScript的"ondrag"事件来连续触发。它优于“输入”,原因如下:

浏览器的支持。 可以区分“ondrag”和“change”事件。“输入”触发拖拽和更改。

jQuery:

$('#sample').on('drag',function(e){

});

参考: http://www.w3schools.com/TAgs/ev_ondrag.asp

这个工作为我在反应引导

           <Form.Control
              type="range"
              className="slider"
              min="0.1"
              max="10"
              step={0.1}
              value={intensity}
              onChange={(e: any) => {
                if (!e.target.onInputHasBeenCalled) {
                  setIntensity(parseFloat(e.target.value.toString()));
                  e.target.onInputHasBeenCalled = true;
                } else {
                  e.target.onInputHasBeenCalled = false;
                }
              }}
            />

Andrew Willem的解决方案并不兼容移动设备。

以下是他的第二个解决方案的修改,适用于Edge、IE、Opera、FF、Chrome、iOS Safari和移动设备(我可以测试):

更新1:删除“requestAnimationFrame”部分,因为我同意这是不必要的。

var listener = function() {
  // do whatever
};

slider1.addEventListener("input", function() {
  listener();
  slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
  listener();
  slider1.removeEventListener("input", listener);
}); 

更新2:对安德鲁2016年6月2日的更新答案的回应:

谢谢,安德鲁-这似乎在我能找到的每一个浏览器(Win桌面:IE, Chrome, Opera, FF;Android Chrome, Opera和FF, iOS Safari)。

更新3:if ("oninput in slider)解决方案

下面的代码似乎可以跨上述所有浏览器运行。(我现在找不到原始来源。)我在用这个,但后来在IE上失败了,所以我去找了一个不同的,因此我在这里结束了。

if ("oninput" in slider1) {
    slider1.addEventListener("input", function () {
        // do whatever;
    }, false);
}

但在我检查你的解决方案之前,我注意到这在IE中又工作了-也许有一些其他的冲突。

显然Chrome和Safari是错误的:onchange应该只在用户释放鼠标时被触发。要获得持续更新,您应该使用oninput事件,它将从Firefox、Safari和Chrome中从鼠标和键盘捕获实时更新。

然而,在IE10中不支持oninput,所以你最好的办法是将两个事件处理程序结合起来,像这样:

<span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/>

查看Bugzilla线程以获得更多信息。

I'm posting this as an answer in case you are like me and cannot figure out why the range type input doesn't work on ANY mobile browsers. If you develop mobile apps on your laptop and use the responsive mode to emulate touch, you will notice the range doesn't even move when you have the touch simulator activated. It starts moving when you deactivate it. I went on for 2 days trying every piece of code I could find on the subject and could not make it work for the life of me. I provide a WORKING solution in this post.

移动浏览器和混合应用

Mobile browsers run using a component called Webkit for iOS and WebView for Android. The WebView/WebKit enables you to embed a web browser, which does not have any chrome or firefox (browser) controls including window frames, menus, toolbars and scroll bars into your activity layout. In other words, mobile browsers lack a lot of web components normally found in regular browsers. This is the problem with the range type input. If the user's browser doesn't support range type, it will fall back and treat it as a text input. This is why you cannot move the range when the touch simulator is activated.

点击这里阅读更多关于浏览器兼容性的内容

jQuery滑块

jQuery提供了一个滑块,以某种方式与触摸模拟工作,但它是起伏的,不是很光滑。它不能满足我,它可能不会为你,但你可以使它工作更顺利,如果你结合jqueryUi。

最佳解决方案:范围触摸

如果你在笔记本电脑上开发混合应用程序,有一个简单易用的库可以让范围类型输入与触摸事件一起工作。

这个库叫做Range Touch。

DEMO

有关此问题的更多信息,请查看这里的这个线程

为移动Safari (webkit)重新创建HTML5范围输入?