資料結構
網路
關係資料庫管理系統 (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+ 次檢視
