如何通过JS在向文本框插入字符串后触发oninput事件？

我使用以下JavaScript代码向文本框插入字符串：

document.querySelector('textarea').value = '0a06282c0241057a10011805220d080510bea3f493062a03010c1628f1a6f493063002382b4001481482010f383634333233303532343736343839';

遇到两种情况：

• 执行代码后直接点击提交按钮无效果，因为oninput事件未触发，提交结果为空且无效。
• 执行代码后手动向文本框输入空格再点击提交按钮，结果正常，因为oninput事件被激活。

我不是网站所有者，无法修改或直接调用后端代码中的oninput事件函数，只能在浏览器控制台运行JS代码，请问如何通过JS激活oninput事件？

解决方案 #

直接修改元素value属性不会触发浏览器原生的输入事件，你可以通过手动构造并分发input事件来模拟用户输入行为，从而激活页面的oninput事件处理逻辑，以下是两种可行方法：

方法1：使用现代浏览器支持的InputEvent构造函数 #

const textarea = document.querySelector('textarea');
// 先给文本框赋值
textarea.value = '0a06282c0241057a10011805220d080510bea3f493062a03010c1628f1a6f493063002382b4001481482010f383634333233303532343736343839';
// 创建并触发input事件
textarea.dispatchEvent(new InputEvent('input', {
  bubbles: true, // 允许事件冒泡，确保页面上层监听器能捕获
  cancelable: true
}));

方法2：兼容旧浏览器的事件创建方式 #

如果遇到不支持InputEvent的旧浏览器，可使用通用的事件创建API：

const textarea = document.querySelector('textarea');
textarea.value = '0a06282c0241057a10011805220d080510bea3f493062a03010c1628f1a6f493063002382b4001481482010f383634333233303532343736343839';
// 创建input事件
const inputEvent = document.createEvent('Event');
inputEvent.initEvent('input', true, true);
// 触发事件
textarea.dispatchEvent(inputEvent);

执行上述代码后，文本框的oninput事件会被正常激活，此时点击提交按钮就能得到正确结果。

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