前端实现JS复制功能可换行

原创已于 2023-02-20 14:10:40 修改 · 置顶 · 898 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5 #复制功能 #复制文本

于 2023-02-09 13:08:31 首次发布

该文章展示了一段JavaScript代码，用于实现点击按钮复制文本到剪贴板的功能。通过创建textarea元素，设置值，选中内容，然后调用document.execCommand(Copy)来执行复制操作，最后删除临时元素，确保页面整洁。用户操作成功后，会显示‘复制成功’的提示。

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

<div @click="copy('姓名:张三\r\n年龄:24')">  //「\r\n 是换行符号」
    点击复制
</div>

 methods: {
    copy(order) {
      var textarea= document.createElement("textarea"); // 创建textarea对象
      textarea.value = order; // 设置复制内容
      document.body.appendChild(textarea); // 添加临时实例
      textarea.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(textarea); // 删除临时实例
      console.log("复制成功！");
      Toast.success("复制成功！");
    },
}