调用stepDown/stepUp未触发range input的change/input事件

当通过代码调用<input type='range'>的stepDown()和stepUp()方法时，input或change事件不会被触发。具体表现为：按下J/K键调用这两个方法移动滑块时，关联的数值标签无法更新；但通过鼠标拖动滑块操作，标签能正常同步更新。

示例代码 #

HTML代码

<p>按J和K键移动滑块但不触发事件，鼠标操作可正常更新标签。</p>
<p>调用stepDown()和stepUp()的按键操作无法更新标签</p>
<input type='range' id='number' step='10'/> 
<label id='value'>50</label>

JS代码

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

// 监听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()
  }
})

解决方案 #

浏览器仅在用户通过原生交互（如鼠标拖动滑块、使用方向键控制滑块）修改值时，才会自动触发input/change事件。通过stepDown()/stepUp()这类API方法程序式修改滑块值时，不会自动触发事件，因此需要手动触发对应的事件来同步更新标签内容。

修改后的JS代码如下：

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

numberEl.addEventListener('input', (event) => {
  valueEl.innerText = event.target.value
})

document.addEventListener('keydown', (event) => {
  if (event.code === 'KeyJ'){
    numberEl.stepDown()
    // 手动触发input事件，触发监听回调更新标签
    numberEl.dispatchEvent(new Event('input'))
  }
  if (event.code === 'KeyK'){
    numberEl.stepUp()
    // 手动触发input事件，触发监听回调更新标签
    numberEl.dispatchEvent(new Event('input'))
  }
})

通过调用dispatchEvent(new Event('input'))，可以手动触发input事件，让原本的监听函数执行，从而同步更新标签的显示内容。如果需要触发change事件，也可以替换为new Event('change')。

内容的提问来源于stack exchange，提问作者Ricky Brooks