纯js实现点击按钮复制指定文本

    猫斯基  — JavaScript  — 复制文本


    在做wordpress主题的时候遇到一个问题,就是“点击复制”按钮后,自动复制淘口令,之后打开淘宝app就可以直接访问宝贝了。

    如果想使用jquery插件,完全可以,推荐这款插件clipboard.js

    clipboard.js 插件下载地址

    如果不想使用插件,可以看看下面的纯js方法。

    原理

    document.execCommand("copy")
    

    浏览器提供了copy命令 ,可以复制选中的内容。

    如果复制的内容在输入框(<input><textarea>)里,可以通过select()方法,选中输入框的文本,然后调用copy命令,将文本复制到剪切板。

    如果是<p>标签,那么select()方法就无法使用了。

    此时,可以利用一个隐藏的<textarea>来实现复制的效果。这样可以省去一个jq插件。

    代码实现

    功能说明:点击copy按钮,将#mao_fuzhi元素的内容赋值给#mao_yincang,然后使用浏览器复制命令,就可以成功复制了。

    HTML

    <style type="text/css">
       .maosingle {position: relative;}
       #mao_yincang {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
    </style>
    
    <div class="maosingle">
       <p id="mao_fuzhi">我是淘口令</p>
       <textarea id="mao_yincang">我是隐藏的猫斯基</textarea>
       <button onclick="copyText()">copy</button>
    </div>
    

    JavaScript

    <script type="text/javascript">
        function copyText() {
          var mao_fuzhi = document.getElementById("mao_fuzhi").innerText;
          var mao_yincang = document.getElementById("mao_yincang");
          mao_yincang.value = mao_fuzhi; // 修改文本框的内容
          mao_yincang.select(); // 选中文本
          document.execCommand("copy"); // 执行浏览器复制命令
          alert("复制成功");
        }
    </script>
    

    阅读量:30 2020-07-24 14:19

返回顶部