如何自动填充HTML输入框并触发onChange以实现提交按钮正常工作

核心问题：直接通过JS修改input的value属性，不会触发前端框架（从按钮的data-awsui-focus-visible属性判断，大概率是AWS UI或React类框架）的状态更新机制，导致表单提交时框架仍认为输入框为空，最终清空内容。

解决步骤 #

1. 触发输入框的input/change事件，模拟真实用户输入 #

直接修改DOM值后，必须手动触发事件让框架感知值的变化：

const inputElem = document.querySelector('input[placeholder="Add Id"]');
// 设置输入值
inputElem.value = "123";
// 创建并触发input事件（多数框架监听此事件更新状态）
const inputEvent = new Event('input', { bubbles: true });
inputElem.dispatchEvent(inputEvent);
// 可选：若框架监听change事件，补充触发一次
const changeEvent = new Event('change', { bubbles: true });
inputElem.dispatchEvent(changeEvent);

// 点击提交按钮
document.querySelector('Button[data-testid="modalSubmitBtn"]').click();

2. 直接调用框架状态更新函数 #

输入框的onChange事件绑定了Z(e.target.value)，可以直接调用该函数同步状态：

const inputElem = document.querySelector('input[placeholder="Add Id"]');
inputElem.value = "123";
// 调用框架的状态更新函数
Z("123");

// 执行提交
document.querySelector('Button[data-testid="modalSubmitBtn"]').click();

3. 关于按钮的data-focus-visible属性 #

该属性是框架标记焦点可见状态的标识，并非提交失败的核心原因。若要模拟完整用户交互流程，可补充聚焦步骤：

inputElem.focus();
document.querySelector('Button[data-testid="modalSubmitBtn"]').focus();

4. 正确调用按钮点击逻辑 #

你之前尝试的代码中，选择器getElementById("linkid")匹配的元素不存在，若要直接调用onclick函数，需使用正确的选择器：

const btnElem = document.querySelector('Button[data-testid="modalSubmitBtn"]');
if (typeof btnElem.onclick === "function") {
    btnElem.onclick.apply(btnElem, [new MouseEvent('click')]);
}

不过这种方式通用性不如触发原生click事件，优先推荐前两种方案。

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