JS实现复制指定文本功能-技术圈

功能描述：

点击按钮，将指定文本复制到剪贴板。

示例如下：

点击分享按钮，将当前条目链接复制到剪贴板。

功能实现：

HTML部分：

<input type="text" id="copyVal" value="被复制内容" />

JS部分：

let input = document.getElementById('httpUrl');
input.select();
if(document.execCommand('copy')){
    链接复制成功执行
}else{
    链接复制失败执行
}

功能升级：

文本框不呈现给用户，点击对应条目的复制按钮，复制对应文本内容。

文本框内容不呈现给用户，有如下几种方式：

1、display属性值为none；

2、opacity属性值为0；

3、不渲染该节点在DOM树中；

4、内容存储在JS中；

但是，要使document.execCommand(‘copy’)生效，要满足如下几点：

1、input框不能有disabled属性

2、width和height不能为0

3、input框不能有hidden、display:none属性

简单来说，输入框要在正常的编辑状态下。

解决方式：

将input框设置属性opacity:0，将输入框的透明度设置为完全透明。设置属性position:absolute，设置输入框绝对定位，不占用文档位置。

代码示例：

HTML部分：

<input type="text" id="copyUrl" v-model="copyUrl"/>

CSS部分：

#copyUrl{
    position: absolute;
    top: 0;
    opacity: 0;
}

JS部分：

let input = document.getElementById('copyUrl');
input.select();

if(document.execCommand('copy')){
    document.execCommand('copy');
    this.$message({
        message: '链接已经复制成功！',
        type: 'success'
    });
    document.execCommand('copy');
}else{
    this.$message({
        message: '链接复制失败！',
        type: 'error'
    });
}

点击关注公众号，查看更多内容：