代码向同网页文本框粘贴数据后需触发键盘操作才保存的问题

你直接通过JavaScript修改textarea的value属性属于程序级赋值，不会触发浏览器默认的用户输入相关事件。绝大多数页面的表单状态同步、自动保存、字段校验逻辑都会监听input、change、keydown这类原生用户输入事件，没收到事件就感知不到文本内容已经更新，自然不会触发后续的保存逻辑。你手动按下键盘时会正常触发输入事件，所以内容才会被识别保存。

赋值完成后手动触发对应事件即可，通用实现代码如下：

// 1. 定位到目标textarea元素，替换选择器为你实际的元素选择器
const targetTextarea = document.querySelector('#your-textarea-selector');
// 2. 写入你提取到的目标内容
targetTextarea.value = '你提取到的待粘贴内容';
// 3. 手动触发input事件，绝大多数场景触发这个事件就足够
const inputEvent = new Event('input', {
  bubbles: true, // 必须开启冒泡，否则绑定在父级的监听逻辑收不到事件
  cancelable: true
});
targetTextarea.dispatchEvent(inputEvent);
// 可选：如果需要触发表单提交校验等逻辑，可以额外触发change事件
const changeEvent = new Event('change', { bubbles: true });
targetTextarea.dispatchEvent(changeEvent);

如果目标页面是用React开发的，textarea属于受控组件，上述方案可能不生效，使用以下兼容写法：

const targetTextarea = document.querySelector('#your-textarea-selector');
// 调用原生value setter绕过React的属性拦截
const nativeTextareaValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLTextAreaElement.prototype,
  'value'
).set;
nativeTextareaValueSetter.call(targetTextarea, '你提取到的待粘贴内容');
// 触发input事件同步React状态
targetTextarea.dispatchEvent(new Event('input', { bubbles: true }));

• 所有手动触发的事件必须开启bubbles: true配置，当前很多前端框架会把事件委托绑定在document或根节点上，不冒泡的事件无法被捕获
• 如果使用Vue/Angular等其他框架，触发input事件基本都可以完成状态同步，不需要额外适配

内容的提问来源于stack exchange，提问作者Ahmed Jamal Bagha