本文介绍一种无需依赖 jquery 的原生 javascript 方案，通过遍历同类型元素并比对 dom 引用，实时获取当前被点击（或聚焦）的 input 元素在其同类集合中的精确索引位置，适用于动态增删表单项的场景。
在构建动态表单（如物料录入系统）时，一个常见需求是：当用户在某个动态生成的 中点击或聚焦后，打开模态框选择数据，再将结果准确回填到该原始输入框。这就要求我们能唯一标识“当前操作的是第几个同类输入框”——即获取其在 DOM 中的逻辑序号（索引），而非仅靠 name="xxx[]" 的数组形式。
直接使用 indexOf() 或 Array.prototype.indexOf() 在 NodeList 上不可行（因 NodeList 非 Array），而硬编码 data-index 属性虽可行，却易在动态增删（如插入、删除中间行）时导致索引错位或维护成本升高。更健壮的做法是：事件触发时，现场计算目标元素在当前所有匹配元素中的位置。
以下为推荐实现（纯原生 JS，兼容现代浏览器）：
// 定义目标元素选择器（可按需调整，例如限定在特定容器内）
const selector = 'input[type="number"].calcular, input[type="number"].medida_uno, input[type="number"].medida_dos';
// 为所有匹配的 number 输入框绑定点击事件（委托更优，但此处强调精准索引）
document.querySelectorAll(selector).forEach(input => {
input.addEventListener('click', function(e) {
const target = e.target;
const allInputs = document.querySelectorAll(selector);
const index = Array.from(allInputs).findIndex(el => el === target);
console.log(`当前输入框索引: ${index}`, '占位符:', target.placeholder);
// ✅ 此 index 即可用于后续模态框回调中的精准赋值
// 例如：openModalAndFillOnSelect(index, target);
});
});? 关键点说明：
- 使用 Array.from(allInputs).findIndex(...) 将静态 NodeList 转为数组后查找引用相等项，语义清晰且兼容性好；
- 比对 el === target 是最可靠的判定方式（避免因 placeholder、value 等属性重复导致误判）；
- 若需支持键盘操作（如 focus），可将 'click' 替换为 'click focus' 并统一处理；
- 注意作用域刷新：动态添加新行后，需重新绑定事件（或改用事件委托）。推荐升级为事件委托以一劳永逸：
// ✅ 更优实践：事件委托（只需绑定一次）
document.addEventListener('click', function(e) {
if (e.target.matches(selector)) {
const allInputs = document.querySelectorAll(selector);
const index = Array.from(allInputs).findIndex(el => el === e.target);
console.log('触发索引:', index);
// 执行业务逻辑...
}
});最后提醒：若表单结构复杂（如含多组独立表格），建议在 selector 中加入容器类名（如 .tableBody input[type="number"]）以避免跨区域干扰。索引计算始终基于当前实时 DOM 快照，因此天然适配动态增删场景，安全可靠。
