Kotak Securities Neo登录页无标识输入框自动填充方案咨询

问题背景 #

在https://neo.kotaksecurities.com/Login页面中，手机号输入框既无name也无id属性，导致Firefox自动填充插件无法识别。该页面由Dart生成，目标输入框为表单中带有fit-text-editing类的<input>元素：

<input class="fit-text-editing" autocomplete="on" autocorrect="on" style="white-space: pre-wrap; align-content: center; position: absolute; height: 25px; transform: matrix(1, 0, 0, 1, 915.25, 238.5);">

实现方案：Tampermonkey用户脚本 #

可以通过编写Tampermonkey用户脚本定位并填充该输入框，核心是穿透Shadow DOM并等待动态元素加载完成。

完整脚本示例 #

// ==UserScript==
// @name         Kotak Securities 手机号自动填充
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动填充Kotak Securities登录页的手机号输入框
// @match        https://neo.kotaksecurities.com/Login
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 替换为你的手机号
    const PHONE_NUMBER = "13XXXXXXXXX";

    // 轮询查找输入框并填充
    function checkAndFillInput() {
        // 获取flt-glass-pane元素并访问其Shadow Root
        const glassPane = document.querySelector('flt-glass-pane');
        if (!glassPane || !glassPane.shadowRoot) return;

        // 在Shadow Root内定位目标输入框
        const phoneInput = glassPane.shadowRoot.querySelector('form input.fit-text-editing');
        if (phoneInput && phoneInput.value !== PHONE_NUMBER) {
            // 填充手机号
            phoneInput.value = PHONE_NUMBER;

            // 触发input和change事件，确保Dart框架感知值变化
            phoneInput.dispatchEvent(new Event('input', { bubbles: true }));
            phoneInput.dispatchEvent(new Event('change', { bubbles: true }));

            // 完成填充后停止轮询
            clearInterval(pollingInterval);
        }
    }

    // 每500ms检查一次元素状态（可根据页面加载速度调整）
    const pollingInterval = setInterval(checkAndFillInput, 500);

    // 页面加载完成后先执行一次检查
    window.addEventListener('load', checkAndFillInput);
})();

关键细节说明 #

• 穿透Shadow DOM：目标输入框嵌套在flt-glass-pane的shadow-root中，必须通过element.shadowRoot访问内部DOM结构。
• 动态元素处理：Dart生成的页面元素是动态加载的，直接在页面加载完成事件中查找可能失败，因此使用轮询机制确保元素加载完成后再操作。
• 事件触发：仅修改value属性无法触发Dart框架的状态更新，需要手动触发input和change事件，让页面识别到输入内容的变化。

使用步骤 #

1. 安装Tampermonkey浏览器扩展
2. 新建用户脚本，粘贴上述代码并替换PHONE_NUMBER为你的手机号
3. 保存脚本后，访问目标登录页即可自动填充手机号

内容的提问来源于stack exchange，提问作者Mavin