调用“stepDown”或“stepUp”不会触发范围输入上的“change”或“input”事件

Question

当在a上调​​用stepDown和时，或事件不会被触发。stepUp<input type='range'>inputchange

以下是该问题的实际代码示例：

<p>J and K move slider left and right but aren't triggering event. 
Using mouse though successfully updates label.</p>

<p>Label isn't updating on keypress which is 
calling <code>stepDown()</code> and <code>stepUp()</code></p>

<input type='range' id='number' step='10'/> 
<label id='value'>50</label>

const numberEl = document.getElementById('number')
const valueEl = document.getElementById('value')

// Same issue is present when listening to 'change'
numberEl.addEventListener('input', (event) => {
  valueEl.innerText = event.target.value
})

document.addEventListener('keydown', (event) => {
  if (event.code === 'KeyJ'){
    numberEl.stepDown()
  }
  if (event.code === 'KeyK'){
    numberEl.stepUp()
  }
})

Answer 1

您必须手动触发按键事件中的更改事件，因为onchange仅在元素失去焦点时触发

  ...

  if (event.code === 'KeyJ'){
    numberEl.stepDown()
  }
  if (event.code === 'KeyK'){
    numberEl.stepUp()
  }
  
  const ev = new Event('change');
  numberEl.dispatchEvent(ev);
...