html+js实现点击内容复制相应内容到剪切板

用js代码就能实现点击文字或者按钮复制某些内容

工作原理

创建一个唯一的隐藏的可复制的元素,然后调用window.getSelection()获取选中内容,再使用document.execCommand(“copy”)执行copy

HTML部分

<p onclick="copyAble(this)">这里写可复制内容,也可以套用到按钮等</p>

JS部分

<script>
    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>

使用方法

JS放在上方,使用onclick="copyAble(this)"标签属性进行调用,代码暂时没有添加复制成功提示功能,需要朋友请自行编辑js。点击相应文字后,直接复制到剪切板

    温馨提示:本文最后更新于2021-09-11 16:47:03,某些文章具有时效性,若有错误或已失效,请在下方留言或加入QQ群:652857097联系群主。
    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞15赞赏
    分享
    评论 抢沙发

    请登录后发表评论