Vue应用中如何获取粘贴文本的来源？

首先明确：原生的paste事件本身并不直接提供粘贴内容的来源信息，浏览器出于安全和隐私考虑，不会暴露这类数据。不过可以通过一些间接方式做大致判断：

• 判断是否来自当前应用内：
  可以在页面内复制内容时，给复制的文本添加一个自定义标记（比如隐藏的HTML注释），粘贴时检查内容中是否包含这个标记。示例代码：

  <template>
    <div>
      <div @copy="onCopy">可复制内容</div>
      <textarea @paste="onPaste"></textarea>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      onCopy(event) {
        // 添加自定义标记
        const customMark = '<!--FROM_MY_APP-->'
        const selectedText = window.getSelection().toString()
        event.clipboardData.setData('text/html', selectedText + customMark)
        event.clipboardData.setData('text/plain', selectedText)
        event.preventDefault()
      },
      onPaste(event) {
        const htmlContent = event.clipboardData.getData('text/html')
        if (htmlContent.includes('<!--FROM_MY_APP-->')) {
          console.log('粘贴内容来自当前应用')
          // 处理时移除标记
          const cleanText = htmlContent.replace('<!--FROM_MY_APP-->', '')
          event.target.value = cleanText
          event.preventDefault()
        } else {
          console.log('粘贴内容来自外部')
        }
      }
    }
  }
  </script>
  

• 区分来自Word/记事本等外部应用：
  不同应用复制的内容在text/html格式下会带有不同的特征标记。比如Word复制的内容会包含大量专属样式（如<o:p>标签、mso-开头的样式属性），记事本复制的内容则是纯文本，text/html数据为空或只有简单的纯文本包裹标签。可以通过这些特征做推测：

  onPaste(event) {
    const htmlData = event.clipboardData.getData('text/html')
    const plainData = event.clipboardData.getData('text/plain')
    
    if (htmlData.includes('mso-') || htmlData.includes('<o:p>')) {
      console.log('大概率来自Word')
    } else if (!htmlData || htmlData === `<p>${plainData}</p>`) {
      console.log('大概率来自记事本或纯文本编辑器')
    } else {
      console.log('来自其他富文本编辑器或网页')
    }
  }
  

需要注意：

• 这种特征判断是推测性的，不是100%准确，不同版本的软件生成的标记可能存在差异。
• 浏览器对clipboardData的访问有触发限制，仅在用户主动触发的事件（如paste、copy）中可以正常访问。

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