电脑端和移动端js代码 实现点击复制功能

2021/11/1819:30:40 发表评论 54

电脑端和移动端js代码 实现点击复制功能。
在网页模板设计中,遇见复制文本内容的需求,通过js代码实现,可以实现点击复制文章链接或文本内容的功能,注意代码在不同设备的兼容性测试,有的代码是有问题的。

利用window对象的getSelection()方法,可兼容pc/ios/Android。

<a href="javascript:;" onclick="copyUrl()">点我复制</a>
<span class="copytxt"></span>
<script>
    function copyUrl(){
        document.getElementsByClassName("copytxt")[0].innerText = "https://www.baidu.com";
        const range = document.createRange();
        range.selectNode(document.querySelector(".copytxt"));
        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('Copy');
        alert("复制成功");
    }
</script>

测试有效。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: