二维码网站JS修改输入未被识别，Create QR Code按钮失效求助

我开发了一个项目，用于从local storage中提取此前为该网站生成的二维码信息，并通过浏览器扩展将其集成到网站中。但代码运行后，网站无法识别通过JavaScript写入的文本，“Create QR Code”按钮完全不认可已输入的内容，仿佛从未有内容被输入。我尝试在输入文本末尾添加空格，但并未奏效，按钮始终处于未激活状态。

直接修改输入框的value属性不会触发网站监听的用户输入事件，而网站的表单验证、按钮激活逻辑依赖这些事件来更新状态。解决方法是在修改value后，手动触发对应的输入事件：

window.addEventListener("load", function() {
  const input = document.getElementById("qrcodeVcardFirstname");
  // 从localStorage提取保存的值
  const savedValue = localStorage.getItem("qrcodeVcardFirstname") || "Ali";
  input.value = savedValue;

  // 派发input事件，让网站感知内容变化（关键步骤）
  input.dispatchEvent(new Event("input", { bubbles: true }));
  // 若input事件无效，可尝试追加change事件
  input.dispatchEvent(new Event("change", { bubbles: true }));
});

原理说明 #

网站的前端脚本通常会监听input、change这类原生事件来判断输入框内容是否变更，进而更新按钮状态。通过JavaScript直接修改value属性属于DOM属性修改，不会自动触发这些事件，必须手动调用dispatchEvent派发事件，模拟用户手动输入的行为，才能让网站的逻辑正常响应。

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