如何修复电子投票机中光标焦点仅前进一次的问题-html教程-PHP中文网

如何修复电子投票机中光标焦点仅前进一次的问题

本文详解电子投票界面中数字输入框光标（.pisca 类）无法连续跳转的根源与解决方案，核心在于动态维护当前高亮元素引用，而非静态缓存首个元素。

本文详解电子投票界面中数字输入框光标（`.pisca` 类）无法连续跳转的根源与解决方案，核心在于动态维护当前高亮元素引用，而非静态缓存首个元素。

在构建类似电子投票机（Urna Eletrônica）的交互式数字输入界面时，一个常见需求是：用户点击数字按钮（如 1, 2, 3…）后，该数字显示在当前闪烁的输入框（.pisca），随后光标自动移至下一个 .digitos-tela 元素并继续闪烁——形成“逐位输入、顺序聚焦”的体验。

然而，原代码中存在一个关键引用错误：

this.digito = document.querySelector(".digitos-tela"); // ❌ 静态获取第一个元素
// …
this.digito.classList.remove("pisca"); // 始终操作第一个元素
this.digito.nextElementSibling.classList.add("pisca"); // 始终加到第二个元素

由于 this.digito 在构造函数中仅初始化一次且未更新，后续所有操作都固定作用于 DOM 中第一个 .digitos-tela 元素，导致光标永远卡在第二位，无法继续向第三、第四位推进。

✅ 正确做法是：始终以当前拥有 .pisca 类的元素为操作基准。因此应完全移除对 this.digito 的依赖，改用实时查询或维护 this.pisca 引用，并确保其在每次输入后准确更新：

this.adicionaTela = (el) => {
  // 确保 this.pisca 是当前闪烁的元素（避免因 DOM 变更导致引用失效）
  const currentPisca = document.querySelector(".pisca");
  if (!currentPisca) return;

  // 显示数字
  currentPisca.textContent += el.textContent;

  // 移除当前闪烁状态
  currentPisca.classList.remove("pisca");

  // 获取下一个输入框（需确保存在且是 .digitos-tela）
  const nextInput = currentPisca.nextElementSibling;
  if (nextInput && nextInput.classList.contains("digitos-tela")) {
    nextInput.classList.add("pisca");
    this.pisca = nextInput; // ✅ 同步更新实例引用
  } else {
    console.warn("已到达最后一位输入框，无法继续聚焦。");
  }
};

⚠️ 重要注意事项：

不要依赖 this.pisca 的初始值（如 document.querySelector(".pisca")）在构造函数中一次性赋值，因为 DOM 状态会随交互变化；
每次执行 adicionaTela 时，应先重新查询当前 .pisca 元素（或确保 this.pisca 已被正确更新），再操作；
添加边界检查（如 nextInput && nextInput.classList.contains("digitos-tela")），防止 nextElementSibling 为空或非目标元素引发错误；
若需支持“删除”或“修正”逻辑（如 .corrige 按钮），应同步反向移动 .pisca 并清空对应内容，保持状态一致性。