求Delphi FMX TWebBrowser中网页用户名密码输入框的通用预设最优方案

针对你遇到的「填充无效、重复调用报错、通用性差」的问题，我分享几个经过实践验证的通用方案，核心思路是不依赖输入框ID，通过DOM属性匹配+JS脚本注入来实现，同时规避执行时机和重复调用的坑：

1. 基础通用方案：基于输入框类型匹配 #

这个方案通过匹配输入框的type属性（用户名用text/email，密码用password）来定位元素，几乎适配90%以上的网站。关键要注意执行时机和避免重复调用：

实现步骤 #

• 首先在窗体类中添加一个标志位，防止重复执行脚本报错：

  private
    FCredentialsFilled: Boolean; // 标记是否已填充过凭据
  

• 在窗体创建时初始化标志位：

  procedure TForm1.FormCreate(Sender: TObject);
  begin
    FCredentialsFilled := False;
  end;
  

• 绑定TWebBrowser的OnLoadFinished事件（必须用这个事件，确保网页完全加载），注入JS脚本填充：

  procedure TForm1.WebBrowser1LoadFinished(Sender: TObject);
  var
    JSCode: string;
  begin
    // 已填充过则直接返回，避免重复执行报错
    if FCredentialsFilled then Exit;
  
    // 构建JS脚本：遍历匹配输入框并填充，同时触发输入事件
    JSCode := 
      'function fillLoginInfo() {' +
      '  // 匹配所有用户名输入框（文本/邮箱类型）' +
      '  const usernameInputs = document.querySelectorAll("input[type=''text''], input[type=''email'']");' +
      '  // 匹配所有密码输入框' +
      '  const passwordInputs = document.querySelectorAll("input[type=''password'']");' +
      '  ' +
      '  // 填充第一个空的用户名输入框' +
      '  if (usernameInputs.length > 0 && usernameInputs[0].value.trim() === """") {' +
      '    usernameInputs[0].value = "你的用户名";' +
      '    // 触发input事件，适配依赖输入事件的网站验证逻辑' +
      '    usernameInputs[0].dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));' +
      '  }' +
      '  ' +
      '  // 填充第一个空的密码输入框' +
      '  if (passwordInputs.length > 0 && passwordInputs[0].value.trim() === """") {' +
      '    passwordInputs[0].value = "你的密码";' +
      '    passwordInputs[0].dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));' +
      '  }' +
      '}' +
      '// 捕获异常，避免脚本错误导致程序崩溃' +
      'try {' +
      '  fillLoginInfo();' +
      '} catch(e) {' +
      '  console.log("凭据填充失败：" + e.message);' +
      '}';
  
    // 执行JS脚本
    WebBrowser1.ExecuteScript(JSCode, nil);
    FCredentialsFilled := True;
  end;
  

2. 进阶精准方案：基于Autocomplete属性匹配 #

很多规范的网站会给登录输入框加上autocomplete属性（用户名用username，密码用current-password），用这个属性匹配会更精准，避免误填其他输入框：

只需把上面的JS脚本替换为：

JSCode := 
  'function fillLoginInfo() {' +
  '  // 优先匹配带autocomplete标记的输入框，其次匹配name属性' +
  '  const usernameInput = document.querySelector("input[autocomplete=''username''], input[name=''username''], input[name=''email'']");' +
  '  const passwordInput = document.querySelector("input[autocomplete=''current-password''], input[name=''password'']");' +
  '  ' +
  '  if (usernameInput && usernameInput.value.trim() === """") {' +
  '    usernameInput.value = "你的用户名";' +
  '    usernameInput.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));' +
  '  }' +
  '  ' +
  '  if (passwordInput && passwordInput.value.trim() === """") {' +
  '    passwordInput.value = "你的密码";' +
  '    passwordInput.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));' +
  '  }' +
  '}' +
  'try {' +
  '  fillLoginInfo();' +
  '} catch(e) {' +
  '  console.log("凭据填充失败：" + e.message);' +
  '}';

常见问题解决 #

• 填充后输入框仍为空：大概率是执行时机不对，一定要在OnLoadFinished事件中执行，不要用OnNavigateComplete（单页应用可能还没渲染完输入框）；另外有些网站会动态生成输入框，这时候可以加个TTimer延迟1-2秒再执行脚本。
• 二次调用报错：用FCredentialsFilled标志位控制只执行一次，同时JS脚本里用try-catch包裹，避免脚本错误扩散到Delphi程序。
• 网站有反爬机制：可以尝试在填充前模拟点击登录按钮（如果输入框是点击后才显示的），或者增加随机延迟再执行填充脚本。

内容的提问来源于stack exchange，提问作者Jens.F