HTML网页按钮复制代码

HTML网页按钮复制代码

 

本篇文章主要为大家详细介绍了js+html5实现复制文字按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

 

 

Html-css样式:(注意css中的样式,最好保留一下,有些页面复制不成功就是没有添加这一句造成的)

 

<style type="text/css">

    *{

      -webkit-user-select: auto;

    }

  </style>

 

Html主内容代码:

 

<span id="content">

     这里是你要复制的内容

    </span>

 

Html按钮代码:

 

<button id="copyBT">复制</button>

 

JavaScript复制指令代码:

 

<script>

      function copyArticle(event) {

        const range = document.createRange();

        range.selectNode(document.getElementById('content'));




        const selection = window.getSelection();

        if(selection.rangeCount > 0) selection.removeAllRanges();

        selection.addRange(range);

        document.execCommand('copy');

        alert("复制成功!");

      }




      document.getElementById('copyBT').addEventListener('click', copyArticle, false);

    </script>

 

以下实例运行 这里是复制到的文字
© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 共8条

请登录后发表评论

    • 热门评论
      STARRY的头像-海之阔STARRY徽章-认识-海之阔等级-LV10-海之阔作者0