javascript - 输入范围更新值，同时更改值

Question

我知道如何创建 <input> range 在用户完成更改后更新值。更改范围栏后，它将触发一个 javascript 函数。例如:

function updateTextInput(val) {
  let output = document.getElementById('umjp_minutes');
  output.innerText = val;
}

<input id="umjp_minutePicker" type="range" min="15" max="100" onchange="updateTextInput(this.value);">
<span id="umjp_minutes">40</span>

为了给用户提供更丰富的体验，我想要范围 <input> 在用户发生变化时进行更新。实现此目的最简单的方法是什么？

Answer 1

将 onchange 事件更改为 oninput，如下所示:

function updateTextInput(val) {
  let output = document.getElementById('umjp_minutes');
  output.innerText = val;
}

<input id="umjp_minutePicker" type="range" min="15" max="100" oninput="updateTextInput(this.value);">
<span id="umjp_minutes">40</span>

可以查看所有DOM事件信息和描述here .