如何在点击input type range滑块后保持焦点以支持键盘交互？

当点击<input type="range">的轨道或拖动滑块时，浏览器默认会在操作完成后移除滑块的焦点，导致无法直接用箭头键调整数值——只有通过Tab键切换回滑块时才能恢复箭头键控制。以下是用JavaScript实现点击滑块后保持焦点，直到Tab切换或点击其他区域的方案：

实现代码 #

HTML #

<input type="range" id="rangeSlider" min="0" max="100" value="50">

JavaScript #

const slider = document.getElementById('rangeSlider');

// 鼠标按下滑块时，强制保留焦点
slider.addEventListener('mousedown', () => {
  slider.focus();
});

// 点击页面非滑块区域时，移除滑块焦点
document.addEventListener('click', (e) => {
  if (e.target !== slider) {
    slider.blur();
  }
});

原理说明 #

• 监听mousedown事件：在用户点击或拖动滑块的瞬间，主动调用focus()方法让滑块保持焦点，这样操作完成后依然可以用箭头键调整数值。
• 监听全局click事件：当点击的目标不是滑块本身时，调用blur()移除滑块焦点，满足“点击其他区域失去焦点”的需求；而Tab键切换焦点是浏览器默认行为，会自动让滑块失去焦点，无需额外处理。

内容的提问来源于stack exchange，提问作者Patrick Vellia