JavaScript 如何在Firefox中拖动输入类型=range时触发onchange事件

范围输入允许在特定的数值范围内选择任何数值。使用JavaScript，我们可以得到用户在范围输入中的输入值。

onchage 事件只有在用户释放鼠标键时才会触发。因此，它不会在拖动范围滑块时更新数值。你可以在所有的浏览器中面临这个问题，如chrome、safari，但不仅仅是在Firefox。

用户可以按照下面的例子来检查拖动范围输入时输入值是否更新。

例子 1 (拖动范围输入时输入值不更新)

在下面的例子中，我们已经创建了范围输入。此外，我们还在范围输入中添加了一个 onchange 事件。用户可以观察到，只有当我们释放鼠标点击时，它才会更新数值，而不是在拖动范围输入时。

<html>
<body>
   <h2> Using the <i> onchange() event </i> to update the range values. </h2>
   <input type = "range" min = "1" max = "10" step = "1" onchange = "changeValue(this.value)">
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function changeValue(newVal) {
         output.innerHTML = newVal;
      }
   </script>
</body>
</html>

一旦用户放开鼠标点击，上述代码就会更新输入值。只在拖动后更新范围并不是一个好主意。我们需要以这样的方式实现代码，即在拖动范围输入时也更新范围值。

我们可以使用 oninput 事件在拖动时更新范围输入的值，而不是使用onchange事件。

在输入类型=range时使用oninput事件

每当用户改变范围输入中的值时，oninput事件就会触发，在用户拖动范围输入时连续触发。

语法

用户可以按照下面的语法来使用输入类型=range的oninput事件属性。

<input type = "range" min = "0" max = "50" step = "5" oninput="changeValue(this.value)">

在上述语法中，每当输入事件触发时，我们就会调用该函数。

例2

在下面的例子中，我们创建了一个范围输入，允许用户选择0到50之间的任何数值。同时，我们在范围输入中添加了步骤属性，允许用户只选择5的倍数。

我们还添加了oninput属性，每当用户拖动范围输入时，它就会调用changeValue()函数。在输出中，用户可以观察到，当用户拖动范围输入时，它更新了范围输入下面的选定值。

<html>
<body>
   <h2> Using the <i> oninput() event </i> to update the range values. </h2>
   <input type = "range" min = "0" max = "50" step = "5" oninput = "changeValue(this.value)">
   <div id = "output"> </div>
</body>
   <script>
      let output = document.getElementById('output');
      function changeValue(newVal) {
         output.innerHTML = "The selected input value in the range input is " + newVal;
      }
   </script>
</html>

例三

在下面的例子中，我们在JavaScript中通过其id访问了范围输入。之后，我们使用addEventListner()方法在范围输入上添加了输入事件。在addEventListnerMethod()里面，我们得到了事件对象。同时，我们使用event.target.value访问目标元素的值，并更新HTML文档中的新值。

在输出中，用户可以观察到下面的代码在拖动范围输入的同时也更新了范围输入的值。

<html>
<body>
   <h2> Using the <i> oninput() event </i> to update the range values. </h2>
   <input type = "range" min = "0" max = "100" step = "10" id = "range_input">
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let input = document.getElementById('range_input');
      input.addEventListener('input', (event) => {
         // event.target returns the targetted element on which the input event is triggered.
         // event.target.value returns the value of the targetted element
         output.innerHTML = "The selected input value in the range input is " + event.target.value;
      })
   </script>
</body>
</html>