Android WebView自动填充HTML表单时JS修改值切换字段被重置如何解决？

问题原因 #

你遇到的重置现象并非网站的防篡改机制，是该站点使用了React、Angular这类现代前端框架开发，直接修改DOM元素的value属性只会改变页面可见值，不会同步更新框架内部维护的表单状态，后续任意页面交互触发状态同步时，框架就会把内部存储的旧值重新写回DOM，导致修改失效。

解决方案 #

按照用户真实输入的流程，修改值后手动触发框架监听的输入事件即可完成状态同步，通用代码如下：

window.addEventListener('load', function() {
  const targetInput = document.getElementById('ts');
  if (!targetInput) return;

  // 模拟用户点击进入输入框
  targetInput.focus();
  // 赋值
  targetInput.value = "58560193";
  // 触发input事件，通知框架值变更
  targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  // 触发change事件，适配需要失焦才同步状态的逻辑
  targetInput.dispatchEvent(new Event('change', { bubbles: true }));
  // 模拟用户离开输入框
  targetInput.blur();
});

如果上述代码执行后依然出现重置问题，说明站点使用React 16+版本，该版本对输入框value做了属性劫持，需要用原生setter绕过劫持，适配代码如下：

window.addEventListener('load', function() {
  const targetInput = document.getElementById('ts');
  if (!targetInput) return;

  targetInput.focus();
  // 调用原生value setter绕过React劫持
  const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
  nativeSetter.call(targetInput, '58560193');
  // 触发事件同步状态
  targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  targetInput.dispatchEvent(new Event('change', { bubbles: true }));
  targetInput.blur();
});

WebView端注意事项 #

• 必须等页面完全渲染完成再执行注入的JS代码，建议在WebView的onPageFinished回调触发后再执行填充逻辑
• 如果表单是动态加载的，load事件触发时目标元素可能还未渲染，可以添加轮询逻辑，每100ms查找一次目标元素，找到后再执行填充操作
• 站点内所有表单字段都可以套用上述逻辑，只需要替换元素ID和要填充的数值即可

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