复制内容到剪切板

我们应该都遇到过这样一个需求，将某一段内容、ID、地址等，复制到粘贴板需求。

除了使用clipboard插件外，单纯的使用js也可以非常容易实现。

execCommand
execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。

Copy 将当前选中区复制到剪贴板。
命令有很多，这里就不一一展示了，感兴趣请戳这里~

思路
整体实现很简单，就是创建一个input 或者textarea，设置value值，然后选中输入框内容，执行复制操作就好。

演示

// js创建一个input输入框
var input = document.createElement("input");   
// 将需要复制的文本赋值到创建的input输入框中，this.ruleForm.url这个是我要复制的内容
input.value = `
收件人：张三  \n
电话：15555555555  \n
地址：北京市-测试区-演示大路333号 \n
购买产品：复制粘贴--execCommand - Copy \n
数量：8盒
`;
// 将输入框暂时创建到实例里面
document.body.appendChild(input);   
// 选中输入框中的内容
input.select();   
// 执行复制操作
document.execCommand("Copy");   

// 最后删除实例中临时创建的input输入框，完成复制操作
document.body.removeChild(input); 
console.log('复制成功'')

到这里其实已经，实现了复制内容到粘贴板的需求，但是大家肯定注意到了，我故意写了很多行，以及添加了 \n 符。

将粘贴板的内容，粘贴出来，会发现是很丑的长长的一坨，不美观。

换行
我们上边提到，复制内容可以用 input 和 textarea，上边我们使用的是 input，所以不美观，我们改为textarea就可以了

var input = document.createElement("textarea");