js实现点击按钮复制div指定内容到剪切板粘贴板
未知
2023-06-29 17:50:02
0
问题描述:
  
   做一个底部点击【添加微信】,出现一个弹窗,出现弹窗的同时复制指定的值到粘贴板上。

tulan

解决办法:

    <div id="copykey" style="display: none">tuln1406a</div>

    <div class="changan" id="toolbar">

        <div class="firdiv"> 添加微信好友了解产品 </div>

        <div class="secdive"><a onclick="dkcf()" title="微信"><span>添加微信</span></a></div>

    </div>  

    <div id="wxnr" >

        <div class="nrdf">

            <i onclick="gbcf()">X</i>
            <img src="333.png" alt=""/>
            <p class="fuzhi">复制成功</p>
            <p class="wei" id="input">微信号:tulan1406</p>
            <p class="wei">添加微信好友,详细了解产品</p>
            <p class="zhi" onclick="gbcf()"><span class="wx">知道了</span></p>

        </div>
    </div>

<style>

    #toolbar { display:block; position: fixed; bottom: 0; width: 100%; z-index: 888; height: 57px; left: 0; background: black}
    #toolbar .firdiv { float: left; width: 60%; color:black;line-height: 60px;font-size: 15px;background: white;}
    #toolbar .secdive{float: right;width: 40%;background: #1AAD17;line-height: 60px}
    #toolbar span{font-weight: 800;font-size: 16px;color: #fff;}
    .changan{   width:100%; max-width:750px;   height:5.125rem;  line-height:5.125rem;  text-align:center;  color:#fff; font-size:22px; position:fixed; bottom:0;   box-shadow:0px 0px 10px rgba(0,0,0,0.4);}

    #wxnr { width: 100%; height: 100%; max-width: 640px; min-width: 320px; position: fixed; top: 0; z-index: 1000; display: none; background: rgba(0,0,0,.6); }

    #wxnr .nrdf { margin: auto; position: absolute; top: 30%; left: 0; right: 0; width: 80%; height: 37%; padding: 12px; padding-top: 26px; margin-top: -12px; text-align: center; background-color: #FFFFFF; box-shadow: 0px 2px 6px #777; -webkit-box-shadow: 0px 2px 6px #777; -moz-box-shadow: 0px 2px 6px #777; border-radius: 10px; }

    #wxnr img { width: 55px; height: 55px; display: block; margin: 0 auto; }

    #wxnr .fuzhi { font-size: 20px; line-height: 15px; text-align: center; margin-top: 10px;font-weight: 800}

    #wxnr .wei { font-size: 15px; line-height: 15px; text-align: center; margin-top: 10px;color: #676767}
    #wxnr i { position: absolute;top: 8px;right: 13px;width: 15px;height: 15px;font-size: 0.px;line-height: 16px;text-align: center;color: gray;font-weight: bold;font-style: normal;cursor: pointer; }
    #wxnr .zhi {padding: 0 25%;}
    #wxnr p .wx { padding:13px 0;background: #1AAD17;border-radius: 23px;display: block; width: 100%;color: white;}

</style>

<script>

  /* 打开微信弹窗 并复制指定值*/

function dkcf(){

  $('#wxnr').fadeIn("fast");

    const div = document.getElementById("copykey");

    const input = document.createElement("input");

    document.body.appendChild(input);

    input.value = div.innerText;

    input.select();

    try {

        if (document.execCommand("copy", false)) {

          layer.msg("div 内容复制成功");

        } else {
          layer.msg("div 内容复制失败");

        }
    } catch (error) {
        console.log(error, "error");

      } finally {
        input.remove();

    }
}

/* 关闭微信弹窗 */

function gbcf(){

  $('#wxnr').fadeOut("fast");

}
</script>


相关内容

XXX技术解析
本文详细解析了XXX技术的定义、特点、应用及发展趋势。该技术具有高...
2025-02-13 01:23:39
网络木马攻击案例剖析:从成...
本文剖析一起网络木马攻击案例,从成功到失败的转变过程揭示网络安全的...
2025-02-10 02:46:38
《哪吒2》的风吹到了美国
《哪吒2》作为中国动画电影佳作,以精美画面和动人故事,展现中国传统...
2025-02-09 22:46:36
如何配置 PHP 以实现上...
通过编辑php.ini文件或使用PHP配置函数,可设置上传文件大小...
2025-02-09 15:00:48
XSS攻击的预防策略与实践...
本文介绍了XSS攻击的预防策略与实践案例。为防止XSS攻击,网站应...
2025-02-09 08:46:40
MySQL存储引擎存储空间...
MySQL存储引擎选择关键,影响存储空间与性能。不同存储引擎如In...
2025-02-08 20:23:43

热门资讯

layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...