如何在 Firefox 中拖动时触发输入类型 = 范围的 onchange 事件？(1)

📌 相关文章

📜 如何在 Firefox 中拖动时触发输入类型 = 范围的 onchange 事件？(1)

📅 最后修改于: 2023-12-03 15:38:15.645000 🧑 作者: Mango

如何在 Firefox 中拖动时触发输入类型为范围的 onchange 事件？

Firefox 中的范围输入类型（range input type）允许用户通过拖动滑块来选择值。如果您正在使用此输入类型，并希望在用户通过拖动滑块时触发 onchange 事件，那么下面是一个简单的解决方案：

解决方案

首先，您需要确保您的 HTML 代码中有一个范围输入类型的元素，如下所示：
```
<input type="range" id="myRange" min="0" max="100" step="1" value="50">
```
然后，使用 JavaScript 获取此元素。您可以使用以下代码行：
```
var range = document.getElementById('myRange');
```
接下来，您需要为该元素添加一个事件监听器，以便在用户通过拖动滑块时触发 onchange 事件。您可以使用以下代码行：
```
range.addEventListener('input', function() {
    range.onchange();
});
```
最后，您可以在 onchange 事件处理程序中添加您想要执行的任何代码。例如，以下代码将在滑块的值改变时更新页面中的文本：
```
range.onchange = function() {
    document.getElementById('myValue').innerHTML = range.value;
}
```

完整的代码示例

下面是一个完整的代码示例，展示了如何在 Firefox 中拖动时触发输入类型为范围的 onchange 事件：

<!DOCTYPE html>
<html>
<head>
    <title>Range Input Example</title>
</head>
<body>
    <input type="range" id="myRange" min="0" max="100" step="1" value="50">
    <p>Value: <span id="myValue">50</span></p>
    <script>
        var range = document.getElementById('myRange');
        range.addEventListener('input', function() {
            range.onchange();
        });
        range.onchange = function() {
            document.getElementById('myValue').innerHTML = range.value;
        }
    </script>
</body>
</html>

在此示例中，每次用户通过拖动滑块选择一个值时，页面上的文本都会自动更新。