Delphi VCL应用向EdgeBrowser网页文本框粘贴及元素枚举求助

一、解决textarea值设置无效果的问题 #

排查及处理方案 #

1. 核对元素ID是否匹配
   你提供的网页示例中textarea的ID是txtGoalTransaction275746_0，但代码里用的是txtGoalTransaction271900_0，先确认目标元素的真实ID。可以先执行调试脚本验证元素是否存在：

procedure TForm1.Button1Click(Sender: TObject);
begin
  EdgeBrowser1.ExecuteScript(
    'const elem = document.getElementById("txtGoalTransaction271900_0");' +
    'console.log(elem ? "元素存在" : "元素不存在");'
  );
end;

打开Edge开发者工具（F12）查看控制台输出，确认元素状态。

2. 确保网页加载完成后执行脚本
   将设置值的代码移至EdgeBrowser1.DocumentCompleted事件中，避免网页未加载完全时执行：

procedure TForm1.EdgeBrowser1DocumentCompleted(Sender: TObject; const Args: TWebBrowserDocumentCompletedEventArgs);
begin
  EdgeBrowser1.ExecuteScript(
    'document.getElementById("txtGoalTransaction271900_0").value = "Test String";' +
    // 触发网页绑定的Count函数，保证页面逻辑正常触发
    'Count(document.getElementById("txtGoalTransaction271900_0"), 5000);'
  );
end;

3. 手动触发绑定事件
   网页的textarea绑定了onkeyup和onchange事件，直接设置value不会自动触发这些事件，需手动调用：

procedure TForm1.Button1Click(Sender: TObject);
begin
  EdgeBrowser1.ExecuteScript(
    'const elem = document.getElementById("txtGoalTransaction271900_0");' +
    'elem.value = "Test String";' +
    'elem.dispatchEvent(new Event("keyup"));' +
    'elem.dispatchEvent(new Event("change"));'
  );
end;

二、枚举EdgeBrowser中的网页所有元素 #

通过执行JS脚本获取元素信息并返回给Delphi，以下是两种实现方式：

方法1：获取全部元素的基础信息 #

procedure TForm1.Button2Click(Sender: TObject);
var
  JSResult: JSValue;
  Elements: TJSArray;
  I: Integer;
  Elem: JSValue;
begin
  EdgeBrowser1.ExecuteScriptAsync(
    'Array.from(document.querySelectorAll("*")).map(elem => ({' +
    '  tagName: elem.tagName,' +
    '  id: elem.id,' +
    '  name: elem.name' +
    '}))',
    procedure(const AResult: JSValue; const AError: Exception)
    begin
      if Assigned(AError) then
      begin
        ShowMessage('执行失败: ' + AError.Message);
        Exit;
      end;
      Elements := TJSArray(AResult);
      for I := 0 to Elements.Length - 1 do
      begin
        Elem := Elements.Items[I];
        Memo1.Lines.Add(Format('标签: %s, ID: %s, Name: %s', [
          TJSValue(Elem['tagName']).AsString,
          TJSValue(Elem['id']).AsString,
          TJSValue(Elem['name']).AsString
        ]));
      end;
    end
  );
end;

方法2：仅枚举文本框类元素（textarea/input文本框） #

修改JS脚本过滤指定类型元素：

Array.from(document.querySelectorAll('textarea, input[type="text"]')).map(elem => ({
  tagName: elem.tagName,
  id: elem.id,
  name: elem.name
}))

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