JS实现复制指定文本功能

全栈开发日记

发布于 2022-05-13 14:45:25

5.2K0

发布于 2022-05-13 14:45:25

文章被收录于专栏：全栈开发日记

功能描述：

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

示例如下：

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

功能实现：

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'
    });
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-06-16，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自全栈开发日记微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度