【前端技巧】实现点击复制文本内容方法

前端Outman

已于 2023-01-05 22:06:09 修改

阅读量819

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技巧 JavaScript 文章标签：前端 javascript 开发语言

于 2022-10-27 11:13:07 首次发布

本文链接：https://blog.csdn.net/weixin_42919342/article/details/127548459

前端技巧同时被 2 个专栏收录

35 篇文章

订阅专栏

JavaScript

24 篇文章

订阅专栏

该博客涉及前端开发，重点围绕JavaScript这一开发语言展开，但具体内容未给出。

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

/**
 * 点击复制文本内容
 * 
 * @param {String} content 
 * 
 * @author Outman
 * @date 2022-10-27
 */
// 【旧】利用inputElement进行copy
function copy(content){
    // 创建input元素，并对其赋值
    var inputElement = document.createElement('input');
    inputElement.value = content;
    // 插入input对象至body中
    document.body.appendChild(inputElement);
    // 选中input元素
    inputElement.select();
    // 执行复制
    document.execCommand('Copy');
    // 移除input元素
    document.body.removeChild(inputElement);
    this.$Message.success('复制成功！');
}

// 【新】由于execCommand已被摒弃，可采用新方法
function copy(content){
    navigator.clipboard.writeText(content).then(() => {
        this.$Message.success('复制成功！');
    });
}