源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js+html5实现复制文字按钮

  • 时间:2020-08-02 15:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js+html5实现复制文字按钮
本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下 图片展示: [img]http://files.jb51.net/file_images/article/201707/2017715151554339.jpg?201761515162[/img] 注意css中的样式,有些页面复制不成功就是没有添加那一句造成的。 代码块
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>

  <style type="text/css">
    *{
      -webkit-user-select: auto;
    }
  </style>

  <body>
    <span id="content">
      你好,好久不见!
    </span>
    <button id="copyBT">复制</button>
    <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>
  </body>

</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部