欢迎光临
我们一直在努力

html中一段js代码实现点击文字复制相应内容到剪切板-经验教程-亿软阁-自动发卡商城-激活码商城-激活码自助发卡网

  HTML中简单制作点击某文字直接复制内容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放在<body>上方,使用onclick="copyAble(this)"标签属性进行调用,代码暂时没有添加复制成功提示功能,需要朋友请自行编辑js。点击相应文字后,直接复制到剪切板。手机电脑都可用。

打赏
这些信息可能会帮助到你: 加盟代理 | 软件问题答疑 | 网站装修推广 | 下单商城

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《html中一段js代码实现点击文字复制相应内容到剪切板-经验教程-亿软阁-自动发卡商城-激活码商城-激活码自助发卡网》
文章链接:https://dk.tkcdk.cn/10183.html
免责声明:本站所有资源和软件均来自于互联网渠道,只整合营销类软件-简单趣味娱乐软件其他危害社会软件客户绕行-免开尊口共同打造健康营销-绿色的微商环境
请遵循相关法律法规合理使用,本站一切资源不代表本站立场如有侵权不妥之处请第一时间联系我们删除,敬请谅解!
投诉侵权邮箱:520lab@2018lab.club 或联系QQ:321679717
分享到: 更多 (0)

亿软阁微营销 更专业 更方便

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏