RC车控制HTML页面：按下方向键时激活CSS i:active状态

嘿，刚好我之前也折腾过RC车的网页控制界面，给你分享个简单靠谱的解决方案：咱们可以用自定义CSS类模拟:active的视觉效果，再通过JS监听键盘事件来切换这个类，完美实现你要的反馈！

第一步：同步CSS样式 #

先把你原来给:active伪类写的样式，复制一份给自定义类（比如叫.key-active），这样不管是鼠标点击还是键盘触发，视觉效果完全一致：

/* 保留原来的鼠标点击active样式 */
.left:active, .up:active, .right:active, .down:active {
  /* 你的原有样式代码 */
}
/* 添加键盘触发的模拟active类 */
.left.key-active, .up.key-active, .right.key-active, .down.key-active {
  /* 和上面:active完全一样的样式 */
}

第二步：编写键盘事件逻辑 #

接下来用JS监听keydown和keyup事件，根据按下的方向键找到对应元素，添加/移除.key-active类，顺便还能调用你已有的控制函数：

// 先把方向键和元素类名做个映射，方便快速查找
const keyToElementMap = {
  ArrowLeft: 'left',
  ArrowUp: 'up',
  ArrowRight: 'right',
  ArrowDown: 'down'
};

// 监听键盘按下事件
document.addEventListener('keydown', (event) => {
  const targetClass = keyToElementMap[event.key];
  if (!targetClass) return; // 不是方向键就直接跳过

  const targetElement = document.querySelector(`.${targetClass}`);
  targetElement.classList.add('key-active');

  // 调用你已有的控制函数，和鼠标点击保持一致
  switch(targetClass) {
    case 'left':
      venstreFunc();
      break;
    case 'up':
      fremoverFunc();
      break;
    case 'right':
      hoyreFunc();
      break;
    case 'down':
      bakoverFunc();
      break;
  }
});

// 监听键盘松开事件，移除模拟active的类
document.addEventListener('keyup', (event) => {
  const targetClass = keyToElementMap[event.key];
  if (!targetClass) return;

  const targetElement = document.querySelector(`.${targetClass}`);
  targetElement.classList.remove('key-active');

  // 如果需要松开按键时停止RC车动作，这里可以加对应的停止函数哦
});

可选优化：防止重复触发 #

要是你按住方向键时不想重复触发控制函数，可以加个Set来记录当前按下的按键：

const pressedKeys = new Set();

document.addEventListener('keydown', (event) => {
  const targetClass = keyToElementMap[event.key];
  if (!targetClass || pressedKeys.has(event.key)) return;

  pressedKeys.add(event.key);
  const targetElement = document.querySelector(`.${targetClass}`);
  targetElement.classList.add('key-active');

  // 调用控制函数...
});

document.addEventListener('keyup', (event) => {
  const targetClass = keyToElementMap[event.key];
  if (!targetClass) return;

  pressedKeys.delete(event.key);
  const targetElement = document.querySelector(`.${targetClass}`);
  targetElement.classList.remove('key-active');

  // 停止动作...
});

这样操作后，按下键盘方向键时，对应的<i>元素就会立刻呈现出和鼠标按下一样的:active状态，松开按键后恢复原样，完全符合你的需求～

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