js实现点击复制文本内容

迈不过友情╰ 2022-05-12 02:36 256阅读 0赞

要实现如下图，点击不同的微信复制微信并调出微信界面的功能  
![这里写图片描述][70]  
html构成，css样式自己写

<a href="weixin://">
        <div class="row">
            <div class="col-xs-4 kong">
                <img class="imgwid" src="./img/show1.png" alt="">
                <div style="height: 8px;"></div>
                <div class="showdi" id="copyBT">
                    <img class="imgwid" src="./img/wx.png" alt="">
                    <div class="wenzi">添加微信:<span id="content">1we</span></div>
                </div>
            </div>
            <div class="col-xs-4 kong">
                <img class="imgwid" src="./img/show2.png" alt="">
                <div style="height: 8px;"></div>
                <div class="showdi" id="copyBT1">
                    <img class="imgwid" src="./img/wx.png" alt="">
                    <div class="wenzi">添加微信:<span id="content1">2we</span></div>
                </div>
    
            </div>
            <div class="col-xs-4 kong">
                <img class="imgwid" src="./img/show3.png" alt="">
                <div style="height: 8px;"></div>
                <div class="showdi" id="copyBT2">
                    <img class="imgwid" src="./img/wx.png" alt="">
                    <div class="wenzi">添加微信:<span id="content2">3we</span></div>
                </div>
    
            </div>
            <div class="col-xs-4 kong">
                <img class="imgwid" src="./img/show4.png" alt="">
                <div style="height: 8px;"></div>
                <div class="showdi" id="copyBT3">
                    <img class="imgwid" src="./img/wx.png" alt="">
                    <div class="wenzi">添加微信:<span id="content3">4we</span></div>
                </div>
            </div>
            <div class="col-xs-4 kong">
                <img class="imgwid" src="./img/show5.png" alt="">
                <div style="height: 8px;"></div>
                <div class="showdi" id="copyBT4">
                    <img class="imgwid" src="./img/wx.png" alt="">
                    <div class="wenzi">添加微信:<span id="content4">5we</span></div>
                </div>
            </div>
            <div class="col-xs-4 kong">
                <img class="imgwid" src="./img/show6.png" alt="">
                <div style="height: 8px;"></div>
                <div class="showdi" id="copyBT5">
                    <img class="imgwid" src="./img/wx.png" alt="">
                    <div class="wenzi">添加微信:<span id="content5">6we</span></div>
                </div>
            </div>
        </div>
    </a>

js部分

function copyArticle(con) {
         const range = document.createRange();
         range.selectNode(document.getElementById(con));
         const selection = window.getSelection();
         if(selection.rangeCount > 0) selection.removeAllRanges();
         selection.addRange(range);
         document.execCommand('copy');
         alert("复制成功！");
     }

只需要重复调用这个函数，传不同的参数即可

$('#copyBT').click(function () { 
            copyArticle('content')
        });
        $('#copyBT1').click(function () { 
            copyArticle('content1')
        });
        $('#copyBT2').click(function () { 
            copyArticle('content2')
        });
        $('#copyBT3').click(function () { 
            copyArticle('content3')
        });
        $('#copyBT4').click(function () { 
            copyArticle('content4')
        });
        $('#copyBT5').click(function () { 
            copyArticle('content5')
        });

此代码不是最优化的代码，本人不是前端，js不熟练，但是实现功能是没有问题的，此代码仅供参考

[70]: /images/20220512/c16e884853b34c21aa65c664775bf0fd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关（简单成功）原生js实现点击复制文本

目录背景核心代码案例 -------------------- 背景 > 我们开发中可能会有点击复制的功能，那么下面将讲述核心代码 1. `s

小灰灰/ 2023年10月14日 23:46/ 0 赞/ 40 阅读

相关 js原生实现鼠标点击元素复制指定的内容

js原生实现鼠标点击元素复制指定的内容:直接看代码吧: <!DOCTYPE html> <html lang="en"> <head> <m

向右看齐/ 2023年08月17日 15:49/ 0 赞/ 159 阅读

相关 JS 实现点击空白隐藏内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

蔚落/ 2023年07月04日 14:16/ 0 赞/ 5 阅读

相关 js 实现点击按钮复制文本

原理：浏览器提供了 copy 命令，可以复制选中的内容 document.execCommand("copy") 可以通过 select() 方法，选中输

素颜马尾好姑娘i/ 2023年02月13日 08:59/ 0 赞/ 28 阅读

相关原生 js 实现点击按钮复制文本

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

柔光的暖阳◎/ 2023年01月21日 04:29/ 0 赞/ 166 阅读

相关 uni-app实现点击复制按钮复制内容

uni-app实现点击复制按钮复制内容 uni-app中有一个 uni.setClipboardData(obj) API方法 <view>{ {

淩亂°似流年/ 2022年09月05日 01:43/ 0 赞/ 597 阅读

相关 js实现点击按钮复制文本功能

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

女爷i/ 2022年08月28日 06:59/ 0 赞/ 302 阅读

相关 js实现点击复制文本内容

要实现如下图，点击不同的微信复制微信并调出微信界面的功能 ![这里写图片描述][70] html构成，css样式自己写 <a href="weixin://"

迈不过友情╰/ 2022年05月12日 02:36/ 0 赞/ 257 阅读

相关【JS】点击文本复制到剪贴板实现

【引言】在前两周完善了一些关于与ERP对接项目日志方面的功能，对于与第三方系统对接的系统来说，记录每一次接口调用的参数返回结果是极其重要的，日志记录越完善，越有利于以后

迷南。/ 2022年03月27日 08:48/ 0 赞/ 425 阅读

相关 js实现复制文本内容到剪切板

原文出处：[https://blog.csdn.net/github\_36091081/article/details/77508710][https_blog.csdn.n

水深无声/ 2021年09月16日 03:06/ 0 赞/ 497 阅读