【备忘】HTML实现点击复制元素文字

最新推荐文章于 2025-03-26 11:57:45 发布

zoujiawei6

最新推荐文章于 2025-03-26 11:57:45 发布

阅读量2k

点赞数

分类专栏： Html

本文链接：https://blog.youkuaiyun.com/zoujiawei6/article/details/100015934

版权

Html 专栏收录该内容

7 篇文章

订阅专栏

借鉴优快云源码里的点击复制代码（就优快云代码块右上角的复制按钮），其大概思路是创建一个唯一的隐藏的可复制的元素，然后调用window.getSelection()获取选中内容，再使用document.execCommand("copy")执行copy。完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>复制文字</title>
</head>
<body>
  <p onclick="copyAble(this)">点我！我是复制内容。</p>
  
  <script>
   /**
    * 可复制的。  
    * @param {Document} element 
    */
    function copyAble(element) {
      var id = 'copy-able-el'
      var scrollTop = document.documentElement.scrollTop;
      var copyElement = document.getElementById(id);
      copyElement|| (copyElement= document.createElement("textarea"),
      copyElement.style.position = "absolute",
      copyElement.style.left = "-9999px",
      copyElement.style.top = scrollTop + "px",
      copyElement.id = id,
      document.body.appendChild(copyElement)),
      copyElement.textContent = element.innerText;
      
      element = id;
      
      if (element = "string" == typeof element ? document.querySelector(element) : element,
        navigator.userAgent.match(/ipad|ipod|iphone/i)) {
          var elementEditable = element.contentEditable
            , elementOnly = element.readOnly;
          element.contentEditable = !0,
          element.readOnly = !0;
          var documentRange = document.createRange();
          documentRange.selectNodeContents(element);
          var selection = window.getSelection();
          selection.removeAllRanges(),
          selection.addRange(documentRange),
          element.setSelectionRange(0, 999999),
          element.contentEditable = elementEditable,
          element.readOnly = elementOnly
      } else {
        copyElement.select()
      }
      document.execCommand("copy")
    }
  </script>
</body>
</html>