数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Firefox 中拖动 type=range 的 input 元素时触发 onchange 事件？
范围输入允许选择特定值范围内的任何值。使用 JavaScript，我们可以获取用户在范围输入中输入的值。
onchange 事件仅在用户释放鼠标键时触发。因此，在拖动范围滑块时，它不会更新值。您可能会在所有浏览器（如 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 事件。
将 oninput 事件与 input type=range 一起使用
每当用户更改范围输入中的值时，oninput 事件都会触发，在用户拖动范围输入时连续触发。
语法
用户可以按照以下语法将 oninput 事件属性与 input type=range 一起使用。
<input type = "range" min = "0" max = "50" step = "5" oninput="changeValue(this.value)">
在上述语法中，每当输入事件触发时，我们都会调用该函数。
示例 2
在下面的示例中，我们创建了范围输入，允许用户选择 0 到 50 之间的任何值。此外，我们在范围输入中添加了 steps 属性，允许用户仅选择 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>
示例 3
在下面的示例中，我们通过其 ID 在 JavaScript 中访问了范围输入。之后，我们使用 addEventListner() 方法在范围输入上添加了 input 事件。在 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>
程序员学习了如何在拖动时更新范围输入值。如果我们不拖动时更新范围输入值，用户无法估计他们选择了哪个值以及他们离目标值还有多远。因此，有必要使用 input 事件在拖动范围输入时更新值。
9K+ 次查看
