本文详解电子投票界面中数字输入框光标（.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并清空对应内容，保持状态一致性。
通过将操作锚点从静态选择器切换为动态上下文（当前闪烁元素），即可实现流畅、可预测的逐位输入流程——这是构建可靠表单导航与数字输入控件的关键实践。
