C#结合WebView2自动化表单时如何通过JS启用禁用的提交按钮

对应表单页面截图：

出现该问题的核心原因是：用户手动输入内容时，浏览器会自动触发输入框绑定的input、change、keydown等一系列原生事件，页面脚本或前端框架监听这些事件完成表单合法性校验后，才会将提交按钮从禁用状态切换为启用状态。直接通过JS修改输入框的value属性不会主动触发上述监听事件，因此无法触发按钮状态更新。

可通过以下几种JS方案解决：

• 方案1：主动派发标准输入事件
  这是适用范围最广的通用方案，设置完输入值后主动触发对应事件即可，示例代码如下：

// 替换选择器为你实际页面的元素选择器
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');

// 设置输入值
usernameInput.value = '测试用户名';
passwordInput.value = '测试密码';

// 主动派发三个常用的输入相关事件
[usernameInput, passwordInput].forEach(element => {
  element.dispatchEvent(new Event('input', { bubbles: true }));
  element.dispatchEvent(new Event('change', { bubbles: true }));
  element.dispatchEvent(new Event('blur', { bubbles: true }));
});

90%以上的常规页面执行上述代码后，提交按钮都会自动变为启用状态。

• 方案2：模拟真实键盘输入
  如果页面做了防自动化校验，监听的是键盘输入事件，可通过模拟逐字符输入的方式绕过：

function simulateType(element, inputText) {
  element.focus();
  for (let char of inputText) {
    // 模拟完整的按键流程
    element.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
    element.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
    element.value += char;
    element.dispatchEvent(new Event('input', { bubbles: true }));
    element.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
  }
  element.blur();
}

// 调用方法
simulateType(usernameInput, '测试用户名');
simulateType(passwordInput, '测试密码');

• 方案3：适配React/Vue等前端框架页面
  如果页面是基于前端框架开发的，直接修改DOM属性无法更新框架内部的状态管理，需要针对性触发框架的属性setter，以React为例：

function setFrameworkInputValue(element, value) {
  const nativeValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
  nativeValueSetter.call(element, value);
  element.dispatchEvent(new Event('input', { bubbles: true }));
}

// 调用方法
setFrameworkInputValue(usernameInput, '测试用户名');
setFrameworkInputValue(passwordInput, '测试密码');

• 方案4：强制启用提交按钮
  如果上述方案都不生效，可直接修改提交按钮的禁用状态：

const submitBtn = document.querySelector('#submit-btn');
submitBtn.disabled = false;
// 如果按钮有禁用状态的专属class，同步移除即可
submitBtn.classList.remove('disabled');

上述所有JS代码都可以直接在WebView2中通过ExecuteScriptAsync方法调用执行。

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