在textarea元素上派发ClipboardEvent粘贴事件不生效问题

我想要通过JavaScript模拟粘贴事件，具体实现代码如下所示：

<!DOCTYPE html>
<html>
<body>

    <div class="col-xs-10 col-md-9 col-lg-8 form-field input_controls">
       <textarea rows="8" cols="60" id="short_description" name="short_description"></textarea>
    </div>


    <script>
    const transfer = new window.DataTransfer();
    transfer.setData('text/plain', 'I LOVE YOU');

    const element = document.querySelector('[name="short_description"]');
    element.dispatchEvent(new ClipboardEvent('paste', {
        bubbles: true,
        cancelable: true,
        clipboardData: transfer
    }));

    </script>
</body>
</html>

运行上述代码后，目标textarea元素中并未填入预期的文本内容。

失效核心原因 #

• 浏览器出于安全防护要求，仅对用户真实操作触发的可信事件执行内置默认行为。通过dispatchEvent手动派发的ClipboardEvent属于脚本生成的合成事件，不在可信事件范围内，浏览器不会自动执行粘贴动作对应的默认逻辑：即读取剪贴板内容、插入到当前激活的输入元素中。
• 代码中手动实例化的DataTransfer对象虽然可以正常挂载到事件的clipboardData属性上，能被页面自行绑定的paste事件监听器读取到，但浏览器内置的原生粘贴处理流程会直接跳过合成事件，不会主动将其中存储的文本写入目标textarea。
• 即使提前调用element.focus()让textarea处于输入激活状态，合成的paste事件依然无法触发默认的文本插入效果，这是浏览器安全模型的固定限制，和代码语法、元素选中状态没有关系。

实现模拟粘贴效果的可行方案 #

不要依赖合成事件触发默认行为，直接通过脚本操作元素内容即可实现同等效果：

const element = document.querySelector('[name="short_description"]');
const pasteContent = 'I LOVE YOU';

// 场景1：全量替换textarea内容
element.value = pasteContent;

// 场景2：在光标当前位置插入内容，和真实粘贴表现一致
element.focus();
const cursorStart = element.selectionStart;
const cursorEnd = element.selectionEnd;
element.value = element.value.slice(0, cursorStart) + pasteContent + element.value.slice(cursorEnd);
// 移动光标到插入内容的末尾
element.selectionStart = element.selectionEnd = cursorStart + pasteContent.length;

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