zoukankan      html  css  js  c++  java
  • 原生 js 实现点击按钮复制文本

    一、原理分析

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

    document.execCommand("copy")

    如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板

    但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使

    最后我的解决方案是,在页面中添加一个 <textarea>,然后把它隐藏掉

    点击按钮的时候,先把 <textarea> 的 value 改为 <p> 的 innerText,然后复制 <textarea> 中的内容

    <style type="text/css">
       .wrapper {position: relative;}
       #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
    </style>
    
    <div class="wrapper">
       <p id="text">我把你当兄弟你却想着复制我?</p>
       <textarea id="input">这是幕后黑手</textarea>
       <button onclick="copyText()">copy</button>
    </div>

    JS 部分

      <script type="text/javascript">
        function copyText() {
          var text = document.getElementById("text").innerText;
          var input = document.getElementById("input");
          input.value = text; // 修改文本框的内容
          input.select(); // 选中文本
          document.execCommand("copy"); // 执行浏览器复制命令
          alert("复制成功");
        }
      </script>
  • 相关阅读:
    git
    build and set proxy in Ubuntu
    export a java project to runable jar
    Remove openjdk in Ubuntu/Configure jdk and running adb in 64-bit Ubuntu
    When you install printer in Ubuntu, just need a ppd file.
    Ubuntu user switch
    Enable SSHD on Ubuntu
    web测试实践——day01
    白盒测试实践-day04
    白盒测试实践-day03
  • 原文地址:https://www.cnblogs.com/alantao/p/9151258.html
Copyright © 2011-2022 走看看