恢复缺失 name 属性的输入框自动填充功能

理解浏览器自动填充机制

浏览器在尝试自动填充表单时，会综合考虑多个因素来识别输入框的类型和预期内容，其中包括：

1. name 属性： 这是识别输入框类型最重要且最可靠的属性之一。浏览器通常会根据 name 属性的值（例如 username、password、email 等）来判断该输入框应填充何种数据。
2. id 属性： 虽然不如 name 属性直接，但 id 属性也可以作为辅助识别的依据。
3. type 属性： 例如 type="text"、type="email"、type="password" 等，它告诉浏览器输入框的预期数据格式。
4. autocomplete 属性： 如果存在，此属性会明确指示浏览器是否应自动填充，以及应填充何种类型的数据（例如 autocomplete="username"、autocomplete="current-password"）。
5. 上下文和启发式算法： 浏览器还会分析输入框周围的文本标签、表单结构以及历史填充记录，通过复杂的启发式算法来猜测输入框的用途。

当 name 属性缺失时，即使其他属性（如 type="password"）存在，浏览器也可能无法准确识别该字段为密码输入框，从而导致自动填充功能失效。

识别自动填充失效的根源

要确定自动填充失效是否由缺少 name 属性引起，可以通过浏览器的开发者工具进行检查。

诊断步骤：

1. 打开目标网页，并触发登录表单（如果它不是默认可见的）。
2. 右键点击无法自动填充的输入框（例如密码输入框），选择“检查”（Inspect）。
3. 在开发者工具的元素面板中，找到对应的 标签。
4. 仔细查看该 标签的属性列表。如果发现缺少 name 属性，或者 name 属性的值不符合常见的识别模式（如 name="password"），那么这很可能是导致自动填充失效的原因。

示例 HTML 片段分析：

考虑以下 HTML 结构，其中密码输入框缺少 name 属性：

<input
  type="password"
  id="mat-input-1"
  class="mat-input-element mat-form-field-autofill-control ng-tns-c57-2 ng-pristine ng-invalid cdk-text-field-autofill-monitored ng-touched"
  matinput=""
  formcontrolname="password"
  aria-invalid="true"
  aria-required="false"
  _ngcontent-hyb-c164=""
>

在这个例子中，虽然 type="password" 和 formcontrolname="password" 提供了线索，但关键的 name 属性缺失，这使得浏览器难以可靠地识别并填充此字段。

NNiji·Journey

二次元风格绘画生成器，由 Spellbrush 与 Midjourney 共同设计开发

61

查看详情

恢复自动填充：动态添加 name 属性

针对因缺少 name 属性而导致的自动填充问题，我们可以利用用户脚本管理器（如 Tampermonkey 或 Greasemonkey）来动态地向目标输入框添加或修改 name 属性。

实现原理：

用户脚本在网页加载时执行自定义 JavaScript 代码。我们可以编写一段脚本，在页面加载完成后，通过 DOM 操作找到目标输入框，然后使用 setAttribute() 方法为其添加 name 属性。

步骤指南：

1. 安装用户脚本管理器： 如果尚未安装，请在您的浏览器（Chrome、Firefox、Edge 等）中安装 Tampermonkey 或 Greasemonkey 扩展。
2. 创建新脚本： 点击用户脚本管理器图标，选择“创建新脚本”。
3. 编写脚本代码： 将以下示例代码粘贴到新脚本编辑器中，并根据您的具体情况进行修改。

示例用户脚本（适用于 Tampermonkey/Greasemonkey）：

// ==UserScript==
// @name         恢复缺失的自动填充属性
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  为缺少 'name' 属性的输入框添加该属性，以启用浏览器自动填充功能。
// @author       AI Assistant
// @match        https://ac.windtre.it/oa/auth/login* // 请将此URL替换为您的目标网站URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /**
     * @function applyAutofillFix
     * @description 查找目标输入框并为其添加缺失的 'name' 属性。
     */
    function applyAutofillFix() {
        // 1. 识别目标输入框：
        //    使用 CSS 选择器定位密码输入框。
        //    这里我们使用 `type="password"` 和 `formcontrolname="password"`
        //    这两个现有属性来精确匹配目标元素。
        const passwordInput = document.querySelector('input[type="password"][formcontrolname="password"]');

        // 2. 检查并添加 'name' 属性：
        //    如果找到了密码输入框，并且它当前没有 'name' 属性，
        //    则为其设置 'name="password"'。
        if (passwordInput && !passwordInput.name) {
            passwordInput.setAttribute('name', 'password');
            console.log('Tampermonkey: 已为密码输入框添加 name="password"。');
        }

        // 3. （可选）如果还有其他需要修复的输入框（如用户名），可以类似地添加：
        //    const usernameInput = document.querySelector('input[type="text"][formcontrolname="username"]');
        //    if (usernameInput && !usernameInput.name) {
        //        usernameInput.setAttribute('name', 'username');
        //        console.log('Tampermonkey: 已为用户名输入框添加 name="username"。');
        //    }
    }

    // 现代网页内容通常是动态加载的，这意味着在脚本执行时，
    // 目标输入框可能尚未完全渲染到 DOM 中。
    // 为了确保脚本能够找到并修改这些元素，我们需要在页面加载后稍作延迟。
    // 对于大多数情况，使用 setTimeout 延迟执行是一个简单有效的方案。
    // 请根据目标网站的加载速度调整延迟时间（毫秒）。
    // 例如，对于 ac.windtre.it 这样的网站，登录表单可能在点击按钮后才出现，
    // 因此需要稍长的延迟来等待元素渲染。
    setTimeout(applyAutofillFix, 1500); // 建议延迟 1.5 秒，可根据实际情况调整

    // 对于高度动态的网站，如果简单的 setTimeout 不够稳定，
    // 可以考虑使用 MutationObserver 来监听 DOM 变化，
    // 在目标元素出现时立即执行 applyAutofillFix。
    // 但 MutationObserver 的实现更为复杂，超出本基础教程的范围。

})();

代码解析：

• @match https://ac.windtre.it/oa/auth/login*：这是用户脚本的匹配规则。它告诉浏览器只有当您访问 https://ac.windtre.it/oa/auth/login 或其子路径时，该脚本才会运行。请务必将其替换为您需要修复的网站的准确 URL。
• document.querySelector('input[type="password"][formcontrolname="password"]')：这是一个 CSS 选择器，用于精确查找页面上的密码输入框。它会寻找所有 type="password" 且同时具有 formcontrolname="password" 属性的 元素。您需要根据目标网站的实际 HTML 结构来调整此选择器，以确保它能准确地选中您要修改的输入框。
• passwordInput.setAttribute('name', 'password');：如果找到了目标输入框且它没有 name 属性，此行代码会为它添加 name="password" 属性。
• setTimeout(applyAutofillFix, 1500);：由于许多网站的内容是动态加载的，我们不能保证在脚本首次执行时目标输入框就已经存在于 DOM 中。因此，我们使用 setTimeout 函数延迟 1500 毫秒（1.5 秒）执行 applyAutofillFix 函数，以确保页面元素有足够的时间渲染。如果网站加载特别慢或元素出现时间不确定，您可能需要增加这个延迟时间。

4. 保存并启用脚本： 在编辑器中保存脚本。它将自动启用。

注意事项与最佳实践

• 选择器精度： 使用尽可能精确的 CSS 选择器来定位目标输入框，以避免意外修改其他不相关的元素。结合 type、id、class 或其他自定义属性是常用的方法。
• 动态内容处理： 对于高度依赖 JavaScript 动态加载内容的网站，简单的 setTimeout 可能不够健壮。如果遇到脚本失效的情况，可能需要更高级的 DOM 监听技术（如 MutationObserver）来确保脚本在目标元素出现后才执行。
• URL 匹配： 确保 @match 规则足够精确，只在您需要修复的网站上运行脚本，避免在其他网站上造成不必要的干扰。
• 浏览器兼容性： 自动填充行为可能因浏览器版本和设置而异。虽然添加 name 属性是通用解决方案，但仍需在目标浏览器中进行测试。
• 道德使用： 用户脚本旨在增强您的个人浏览体验。请勿滥用此技术来绕过网站的预期安全措施或进行恶意活动。

通过遵循本教程，您可以有效地解决因缺少 name 属性导致的浏览器自动填充失效问题，从而恢复密码和其他表单数据的便捷填充功能，显著提升您的上网体验。