复制到剪贴板,粘贴进微信,换行符失效

问题描述

微信(windows)版本:v2.9.0

windows环境下,使用 copy-to-clipboard 实现 复制到剪贴板,粘贴进微信(windows),换行符失效。

原因

阅读 copy-to-clipboard,clipboard-copy 等 package 源码,发现实现方式是把数据放进 span 的 textContent,但是数据被 span 标签格式化,数据前后发生了改变,导致换行符失效。

也有实现方式是把数据放进 input 的 value,同样数据前后发生了改变,换行符失效。

ps:把复制前后的数据打印进控制台,看起来没有区别,因为控制台对数据进行了转码,如何证明不一样,待研究。(在浏览器的控制台,txt文件,复制到 textarea 转为 charCode 均显示一致。)

同理复现:windows 下,微信聊天框输入换行的文字并复制,浏览器查看元素粘贴进span,然后失焦,然后点击标签复制内容,粘贴进微信聊天框,内容变成了不换行。

解决方案

textarea 天然支持 换行符,使用 textarea 代替 span 或 input。

function copyToClipboard(txt) {
  var textarea = document.createElement("textarea");
  textarea.value = txt;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

whosmeya.com

原文地址:https://www.cnblogs.com/whosmeya/p/12960907.html