问题描述
微信(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);
}