使用TWebBrowser.EvaluateJavaScript()向HTML文本输入框赋值异常问题

问题场景 #

基于Delphi FMX开发的Android应用，使用TWebBrowser访问巴西联邦税务局CPF查询页面，需向id为txtCPF的text输入框插入字符串02403989987，但出现两类异常。目标输入框的HTML代码如下：

<input 
  type="text" 
  name="txtCPF" 
  id="txtCPF" 
  size="18" 
  maxlength="14" 
  autofocus="" 
  title="Informe os onze dígitos do número do CPF." 
  onkeypress="javascript: return EntradaNumerico(event);" 
  onfocus="javascript: RemoveMask('txtCPF');" 
  onblur="javascript: FG_FormatarCPF('txtCPF');" 
  autocomplete="off" 
  value=""
>

页面地址：

wbConsultaCPF.URL := 'https://servicos.receita.fazenda.gov.br/servicos/cpf/consultasituacao/ConsultaPublica.asp';

异常详情 #

1. 使用带双引号的字符串赋值时：

var
  wbConsultaCPF: TWebBrowser;
begin
  wbConsultaCPF.EvaluateJavaScript('document.getElementById("txtCPF").value = "012345";');
end;

浏览器直接在白屏显示012345，输入框未正确填充，该代码在iOS平台可正常运行。

2. 使用数字类型赋值时：

wbConsultaCPF.EvaluateJavaScript('document.getElementById("txtCPF").value = 012345;');

输入框仅显示12345，首位0丢失。

解决方法 #

1. 模拟用户交互流程赋值：先触发输入框的focus事件执行掩码移除方法，再赋值，最后触发blur事件应用掩码，避免直接赋值触发页面异常：

wbConsultaCPF.EvaluateJavaScript(
  'var el = document.getElementById("txtCPF");' +
  'el.focus();' +
  'RemoveMask("txtCPF");' +
  'el.value = "02403989987";' +
  'el.blur();'
);

2. 确保页面加载完成后执行：通过TWebBrowser的OnFinishLoading事件判断页面完全加载后，再执行JavaScript赋值操作，避免DOM元素未就绪导致的异常。

3. 规范字符串传递格式：在Delphi中传递JavaScript代码时，使用单引号包裹字符串，减少引号转义冲突：

wbConsultaCPF.EvaluateJavaScript("document.getElementById('txtCPF').value = '02403989987';");

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