如何实现页面加载后无需点击即可用方向键控制HTML滑块

问题核心在于：range输入框只有获得焦点时才能响应方向键操作。你需要在页面加载完成后，自动让滑块获取焦点，就能直接用方向键控制了。

你的代码里的事件监听写法有误（缺少事件类型参数），可以替换成页面加载完成后主动触发焦点设置的逻辑，修改后的完整代码如下：

<script>
function updateImage(sliderValue) {
   document.getElementById("image").src = "img" + sliderValue + ".png";
}

// 页面加载完成后自动让滑块获得焦点
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('slider').focus();
});
</script>

<div class="slider-container">
  <input type="range" min="0" max="384" value="0" step="6" 
oninput="updateImage(this.value)" id="slider"/>
</div>

<img id="image" src="img.png" width="1144" height="898">

关键修改说明 #

• 移除了原来错误的addEventListener调用，改用DOMContentLoaded事件监听页面加载完成的时机
• 在页面加载完成后，主动调用slider.focus()给滑块设置焦点，这样页面一打开就能用方向键控制滑块了

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