复制内容到剪切板
我们应该都遇到过这样一个需求,将某一段内容、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");