本文详解电子投票界面中数字输入框光标动画（pisca类）无法连续向后传递的根本原因，并提供精准的 javascript 修复方案，确保用户每点击一次数字，焦点自动移至下一个输入框。
本文详解电子投票界面中数字输入框光标动画（pisca类）无法连续向后传递的根本原因，并提供精准的 javascript 修复方案，确保用户每点击一次数字，焦点自动移至下一个输入框。
在您实现的电子投票机（Urna Eletrônica）中，.pisca 类通过 CSS 动画（@keyframes pisca）模拟输入焦点的闪烁效果，其设计逻辑是：用户点击一个数字按钮 → 该数字填入当前带 .pisca 类的 .digitos-tela 元素 → 焦点（即 .pisca 类）立即移至下一个同级 .digitos-tela 元素，以此支持逐位输入（如候选人编号通常为 2–4 位）。
然而，问题出在 this.digito = document.querySelector(".digitos-tela") 这一行代码上。它仅在实例化时执行一次，始终获取 DOM 中第一个 .digitos-tela 元素（即最左侧的输入框），并将其赋值给 this.digito。后续在 adicionaTela() 方法中，您却错误地使用了这个「静态引用」来操作焦点：
// ❌ 错误：始终操作第一个 .digitos-tela，而非当前闪烁的元素
this.digito.classList.remove("pisca"); // 总是移除第一个框的 pisca
this.digito.nextElementSibling.classList.add("pisca"); // 总是加给第二个框
这导致：第一次点击 → 第1框填数、第2框亮起；第二次点击 → 仍从第1框移除 pisca（此时它本无该类）、再给第2框加 pisca（但它已有）→ 焦点卡死，后续框完全无法激活。
✅ 正确解法是：完全放弃 this.digito，全程基于动态定位的 this.pisca 操作。因为 this.pisca 在每次点击后都会被重新查询（document.querySelector(".pisca")），天然指向当前正在闪烁的元素。修改 adicionaTela() 如下：
this.adicionaTela = el => {
// 确保当前 pisca 元素存在且可写入
if (!this.pisca) return;
// 将点击的数字追加到当前闪烁框
this.pisca.innerText += el.innerText;
// ✅ 关键修复：从「当前 pisca 元素」移除类，再加给它的下一个兄弟
this.pisca.classList.remove("pisca");
const nextInput = this.pisca.nextElementSibling;
// 防御性检查：确保下一个元素存在且是 .digitos-tela
if (nextInput && nextInput.classList.contains("digitos-tela")) {
nextInput.classList.add("pisca");
this.pisca = nextInput; // ✅ 同步更新 this.pisca 引用
} else {
console.warn("已到达最后一位输入框，无法继续移动焦点");
}
};
同时，需移除构造函数中对 this.digito 的初始化（因其已弃用），并确保 this.pisca 始终反映最新状态——这正是您原代码中 this.pisca = document.querySelector(".pisca") 所做的，但必须在每次操作后显式更新（如上所示），否则下次 adicionaTela() 调用时 this.pisca 仍是旧引用。
⚠️ 注意事项：
- 不要依赖
querySelector返回的「初始节点」作为长期引用，DOM 结构变化或类名更新后该引用会失效；- 使用
element.nextElementSibling前务必校验存在性，避免null报错；- 若需支持「回退」（如“纠正”按钮），应维护一个输入框索引栈或双向链表，而非仅靠
nextElementSibling；- 动画性能提示：
.pisca的animation-iteration-count: infinite在大量快速点击时可能触发重绘抖动，生产环境建议添加will-change: opacity或改用transform: scale()优化。
至此，焦点将严格按顺序（第1 → 第2 → 第3 → …）流转，用户可流畅输入多位数字，彻底解决“仅传递一次”的核心缺陷。
