Happy-DOM 项目中 FormData 对禁用输入值的处理问题解析

问题背景

在 Web 开发中，表单处理是一个基础且重要的功能。Happy-DOM 作为一个模拟浏览器环境的 JavaScript 库，需要准确实现 DOM 和 Web API 的各种行为。最近发现了一个关于表单数据处理的特殊情况：当表单中包含被禁用的输入字段时，FormData API 的行为与预期不符。

问题现象

在 Happy-DOM 的当前实现中，即使表单中的输入字段被设置为 disabled，使用 FormData.get() 或 FormData.getAll() 方法仍然能够获取到该字段的值。这与主流浏览器（如 Chrome、Firefox 等）的行为不一致，在这些浏览器中，被禁用的表单字段不应该包含在提交的数据中。

技术分析

标准行为

根据 HTML 规范，被禁用的表单控件（disabled 属性设置为 true 的 input、select、textarea 等元素）具有以下特点：

1. 不会接收焦点
2. 在表单提交时会被忽略
3. 其值不会包含在提交的表单数据中
4. 无法通过 Tab 键导航到该元素

Happy-DOM 的当前实现

Happy-DOM 目前的实现在构建 FormData 对象时，没有过滤掉被禁用的表单元素。这意味着即使用户无法修改这些字段（因为它们被禁用），它们的值仍然会被包含在表单提交的数据中。

影响范围

这个问题会影响以下场景：

• 表单验证逻辑
• 服务器端接收到的数据完整性
• 依赖禁用字段不被提交的应用程序逻辑
• 测试用例的预期行为

解决方案

要解决这个问题，需要在 Happy-DOM 的表单数据处理逻辑中添加对 disabled 属性的检查。具体来说：

1. 在构建 FormData 时，应该跳过所有带有 disabled 属性的表单元素
2. 确保这一行为与主流浏览器保持一致
3. 更新相关测试用例以验证这一行为

实现细节

在技术实现上，需要修改 Happy-DOM 中处理表单数据的部分。关键点包括：

• 遍历表单元素时检查 disabled 属性
• 对于禁用的元素，不将其名称和值添加到 FormData 对象中
• 确保这一变更不会影响其他表单相关的功能

兼容性考虑

这一变更属于行为修正，而非功能添加，因此：

• 对于依赖当前行为的代码可能会受到影响
• 应该被视为一个破坏性变更（breaking change）
• 建议在项目的变更日志中明确说明这一行为变化

总结

正确处理表单中禁用元素的行为对于保持与浏览器一致的行为至关重要。Happy-DOM 通过修正这一问题，进一步提升了其在模拟真实浏览器环境方面的准确性。开发者在使用表单和 FormData API 时，可以更加信任 Happy-DOM 的行为与真实浏览器一致，从而编写出更加健壮的应用程序。

这一改进也体现了 Happy-DOM 项目对细节的关注和对规范遵从的承诺，使得它成为 Node.js 环境中测试和模拟浏览器行为的更可靠工具。