zoukankan      html  css  js  c++  java
  • 复制功能

    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;
         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;
         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

  • 相关阅读:
    世界排名第二的web前端框架bulma与Bootstrap框架的选择
    Bootstrap5中文手册翻译完毕
    RabbitMQ 学习一 了解+点对点模式
    仿京东搜索
    ES集成SpringBoot
    ElasticSearch
    权限管理整合springsecurity代码执行过程
    权限管理
    Gateway网关
    canal数据同步 客户端代码实现
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/13518858.html
Copyright © 2011-2022 走看看