如何在paste事件中优雅获取textarea的粘贴内容？

方法1：使用input事件（推荐） #

input事件会在textarea内容更新完成后触发，因此可以直接获取到粘贴后的最新值。如果只需要监听粘贴操作，可通过event.inputType过滤：

document.getElementById('my-textarea').addEventListener('input', event => {
    // 仅处理粘贴触发的内容变更
    if (event.inputType === 'insertFromPaste') {
        const contents = event.target.value;
        // 执行API请求逻辑
        // fetch(...)
    }
});

若不需要区分输入类型，直接监听input事件即可覆盖所有内容变更场景（包括粘贴、键盘输入、拖拽等）。

方法2：直接读取剪贴板数据 #

在paste事件中，可通过event.clipboardData直接获取剪贴板内容，无需等待DOM更新。适合仅需使用粘贴内容本身的场景：

document.getElementById('my-textarea').addEventListener('paste', event => {
    const pastedContent = event.clipboardData.getData('text');
    // 直接使用粘贴内容发起请求
    // fetch(...)
});

注意：如果需要获取粘贴后的完整textarea内容（原内容+粘贴内容），这种方法需手动处理光标位置和内容拼接，复杂度较高，不如input事件省心。

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