webapp 点击按钮复制（案例复制成功后才能下载）

最新推荐文章于 2024-03-17 18:20:51 发布

qq_20067647

最新推荐文章于 2024-03-17 18:20:51 发布

阅读量1.4k

点赞数 1

分类专栏：手机端webapp js 文章标签： webapp 手机端复制 web前端 html5手机端复制

本文链接：https://blog.csdn.net/qq_20067647/article/details/80461713

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

手机端webapp

1 篇文章 0 订阅

订阅专栏

1.引入js

<script type="text/javascript" src="js/clipboard.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

2. html 代码

<div class="tuiguang">
    <div class="yqm">
        <span class="left"><i>邀请码：</i><input type="text"  name="yqm" id="yqm" value="123456"/></span>
        <span class="right" class="btn" id="copyBtn" data-clipboard-text="" data-clipboard-action="copy">复制邀请码</span>
    </div>
<button type="button" class="downapp-btn">下载app(请先复制邀请码)</button>
</div>

3.css样式

.left{ float: left;}
.right{float: right;}
.tuiguang{padding:20px 20px 20px; }
.tuiguang .yqm{ margin: 30px 15px 0px; background-color: #fae2e2; height: 52px; line-height: 52px; border-radius: 30px; position: relative; }
.tuiguang .yqm .left{color: #d31213; font-size:.8rem;line-height: 52px;height: 52px;}
.tuiguang .yqm .left i{ padding-left:1rem}
.tuiguang .yqm .right{color: #fff; font-size:.8rem;background-color: #d31213;padding: 0px 15px; border-radius: 0px 30px 30px 0px; right: 0px; bottom: 0px; z-index: 10;position: absolute;height: 52px; line-height: 52px;}
.tuiguang p{ color:#000;margin: 0px 20px 20px; font-size:.6rem; text-align: center; padding:5px 0 0 0;}
.tuiguang input{background: none;line-height:52px;outline: none;color: #d31213;font-size:.8rem; border: none;float:right !important; width:100px; overflow: hidden;}
.tuiguang .downapp-btn{display: block;margin:35px auto 0px;padding: 0px 30px;font-size:.7rem;height: 40px;line-height: 40px;border:none;border-radius: 30px;outline: none; background-color: #ececec;color:#333; }
.tuiguang .on{background-color: #d31213;color: #fff;}