本文介绍如何使用chrome开发者工具的console面板，通过javascript代码批量修改网页中大量文本框（input）的值，特别适用于需快速更新数百个价格字段等场景。
本文介绍如何使用chrome开发者工具的console面板，通过javascript代码批量修改网页中大量文本框（input）的值，特别适用于需快速更新数百个价格字段等场景。
在日常网页数据维护中，常遇到需要批量更新表单字段（如商品价格、数量等）的情况。手动逐个修改200+行不仅低效，还易出错。此时，浏览器控制台（Console）配合简洁的JavaScript脚本，可实现“所见即所得”的高效批量赋值——无需后端交互，仅改变页面DOM中的视觉与逻辑值，后续点击保存按钮即可生效。
✅ 推荐方案：基于value属性精准定位并批量修改
由于提问者尝试的 getElementById 和 getElementsByName 失败（ID可能动态生成或不存在，name属性也可能不唯一或未设置），更稳健的方式是按当前显示值反向查找所有匹配的 <input> 元素。以下为通用、可复用的控制台脚本：
// ✅ 设置新值（注意：保留原始格式，如带逗号分隔符或两位小数）
var newValue = '1,00'; // 或 '5.00'、'123.45' 等，按实际需求填写
// ? 查找所有 value 属性等于旧值的 input 元素（支持精确匹配）
var elements = document.querySelectorAll('input[value="3.33"]');
// ? 批量赋值（同时更新 DOM 值和用户可见内容）
for (var i = 0; i < elements.length; i++) {
elements[i].value = newValue;
// 可选：触发 input/change 事件，确保依赖该值的JS逻辑（如实时计算、校验）正常响应
elements[i].dispatchEvent(new Event('input', { bubbles: true }));
elements[i].dispatchEvent(new Event('change', { bubbles: true }));
}? 为什么
querySelectorAll('input[value="..."]')更可靠？
它直接匹配HTML标签中value="..."的静态属性值，不依赖ID/name等可能缺失或不规范的标识，尤其适合自动生成的表单（如ERP、CMS后台）。截图中元素的id含下划线和长编号（如LAYOUT_DONNEES_PRIX-2-16-cell），极大概率是动态生成，难以枚举；而价格值（如"3.33"）在源码中稳定存在，是理想的锚点。
⚠️ 注意事项与进阶技巧
-
数值格式一致性：若原始值含千分位逗号（如
"1,234.56"）或本地化格式，请严格按HTML中实际value属性的字符串形式书写（例如input[value="1,234.56"]），避免因空格或引号差异导致匹配失败。 -
区分
value属性与value属性值：<input value="3.33">中的value="3.33"是HTML属性；用户输入后若未刷新页面，该属性值不会自动更新。因此脚本匹配的是初始加载时的属性值，适用于页面首次渲染后的批量初始化。 -
提高容错性（可选）：若需模糊匹配（如所有价格类input），可用
document.querySelectorAll('input[name*="PRIX"], input[id*="PRIX"]')配合循环判断parseFloat()，但需额外处理异常。 -
验证是否生效：执行后可在控制台输入
elements[0].value查看首个元素新值；也可右键检查元素，确认<input>标签内value属性已更新（部分框架会同步属性，部分仅更新JS属性）。
✅ 总结
将Excel VBA计算结果导出为“旧值→新值”映射表后，你只需在控制台运行上述脚本（替换 newValue 和选择器中的旧值），即可秒级完成数百行文本框的可视化更新。整个过程零安装、零服务器依赖，是前端自动化提效的经典实践。记住：以内容为锚点，比以ID为锚点更鲁棒；批量操作后主动触发事件，比静默赋值更兼容现代框架。
