复制内容到剪切板 -- 换行

最新推荐文章于 2023-08-11 11:09:28 发布

拿回忆下酒

最新推荐文章于 2023-08-11 11:09:28 发布

阅读量2.5k

点赞数 2

文章标签： execCommand 剪切板复制内容换行

本文链接：https://blog.youkuaiyun.com/qq_38998250/article/details/112346603

版权

本文介绍如何使用JavaScript的execCommand方法，通过创建input或textarea元素，实现内容复制到剪贴板，并解决换行美观问题。无需依赖clipboard插件，适合处理地址、ID等复制任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

上边我使用了 `` 字符串模板，正常应该使用 \r 换行的，具体使用大家实验一下就可以了