复制功能

https://github.com/zenorocha/clipboard.js

 

示例

<p class="mt30 url" >csccscs</p>
<div class="moblie-inside-information textCenter">
  <img src="/web/images/info.png" />
  <div class="c-666 f500 mt10 font">暂不支持手机访问</div>
  <div class="mt20 fs28 f500 tip">请用电脑访问以下网址</div>
  <p class="mt30 url" id="unSupportUrl">/test</p>
  <button
    class="c-fff f500 textCenter btn"
    id="copy"
    data-clipboard-action="copy"
    >
    复制网址
  </button>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="clipboard.min.js"></script>
<script>
  var clipboard = new ClipboardJS('.btn', {
    target: function() {
      return document.querySelector('#unSupportUrl');
    }
  });

  clipboard.on("success", function (e) {
    alert("复制成功！")
  })

  clipboard.on("error", function (e) {
    alert("复制失败！请手动复制")
  })
</script>
<style>
  .font {
    font-size: 32px;
  }
  .tip {
    color: #989898;
  }
  .url {
    font-size: 1.2px;
    color: #0768ac;
    /* line-height: 43px; */
    word-wrap: break-word;
  }

  .btn {
    display: block;
    width: 100%;
    height: 44px;
    background: rgba(7, 104, 172, 1);
    border-radius: 10px;
    border: 2px solid rgba(2, 104, 177, 1);
    font-size: 1.2rem;
  }
  .font {
    font-size: 1.2rem;
  }
  .submitBtn {
    display: block;
    width: 686px;
    height: 94px;
    background: rgba(248, 248, 248, 1);
    border-radius: 10px;
    border: 2px solid rgba(5, 5, 5, 0.1);
    font-size: 36px;
    line-height: 94px;
    text-align: center;
    margin: 30px auto 0px;
  }
  .textCenter {
    text-align: center;
  }
  .mt20 {
    margin-bottom: 20px;
  }
  .mt30 {
    margin-bottom: 1rem;
  }
  .f500 {
    font-weight: 500;
  }
  .c-666 {
    color: #666;
  }
  .f500 {
    font-weight: 500;
  }
  .mt10 {
    margin-top: 0.2rem;
  }
  .fs28 {
    font-size: 1rem;
  }
</style>

 代码仓库： 

https://gitee.com/guangzhou110/copy