Question

我有一个表单，其中包含几个类型为＆＃39; range＆＃39;的输入，并且有一个隐藏的提交按钮，直到每个范围输入触发一个事件。我很好奇为此目的选择哪种类型的活动。

如果使用＆＃39;点击＆＃39;事件，一些较旧的浏览器（即Windows＆＃Safari; Safari）不会总是注册事件。使用＆＃39; mouseup＆＃39;可能不是一个好主意，因为在旧版浏览器或某些移动浏览器上，范围输入将生成为常规输入框。执行以下操作，只是不会在Android上运行的Opera浏览器上触发事件（范围输入呈现为常规文本输入框）：

$('#my_form input').on("mouseup change", function(){ ... }

所以我的问题是，我应该选择哪种类型适用于旧版，移动版和现代版浏览器，并避免上面列出的问题？

Answer 1

显然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 thread。

Answer 2

您可以使用更改事件：

$('#my_form input').on("change", function(){ ... }

或：

$('#my_form input').change(function(){ ... }

即使浏览器将范围输入呈现为常规文本输入，这也会起作用。

我应该使用“范围”类型的输入使用哪种事件类型？

2 个答案: