html5页面ClipboardJS实现点击复制功能

最新推荐文章于 2024-06-22 14:01:29 发布

安果移不动

最新推荐文章于 2024-06-22 14:01:29 发布

阅读量1.6w

点赞数 2

分类专栏： 004html

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/82256164

版权

004html 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

从网上兴高采烈的找了一个复制demo

结果集成了不能用

我还误导了一群大概60多个人这样子。。。。。

我这次从官网找的自己确实成功以后再来分享给大家

复制并且提示

<script src="//lib.baomitu.com/toastr.js/latest/js/toastr.min.js"></script>
<script src="//lib.baomitu.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<?php echo $codepay_html; ?>
<script>

    var clipboard = new Clipboard('.copy');
    clipboard.on('success', function (e) {
        toastr.success("复制成功,可扫码付款时候粘贴到金额栏付款");

    });
    clipboard.on('error', function(e) {
        document.querySelector('.copy');
        toastr.warning("复制失败,请记住下必须付款的金额 不能多不能少否则不能成功");
    });
</script>

       <div class="amount" style="position: relative;"><span id="money">￥<?php echo $price ?></span>
            <div style="position: absolute;font-size: 10px;top: 29px;left: 75%;"><a href="#" class="copy" id="copy"
                                                                                    data-clipboard-text="<?php echo $price ?>">复制金额</a>
            </div>
        </div>

以下是官方文档

点我看官方文档

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>this is 方案 1 </title>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!--以下三个是备用  浏览器打不开第一个 换下面的-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
    <!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
</head>
<body>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
  Copy to clipboard
</button>

<hr>
<br>
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

<script>
    //必须要初始化 第一种初始化
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is 方案 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div id="btn" data-clipboard-text="1">
    <span>Copy</span>
</div>

<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用  浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->

<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
    var btn = document.getElementById('btn');
    var clipboard = new ClipboardJS(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个选择器下的复制</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>

<!-- 2. Include library -->
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用  浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->

<!-- 3. Instantiate clipboard by passing a list of HTML elements -->
<script>
    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>

安果移不动

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
html5页面ClipboardJS实现点击复制功能

从网上兴高采烈的找了一个复制demo结果集成了不能用我还误导了一群大概60多个人这样子。。。。。我这次从官网找的自己确实成功以后再来分享给大家复制并且提示&lt;script src="//lib.baomitu.com/toastr.js/latest/js/toastr.min.js"&gt;&lt;/script&gt;&lt;script src="//lib...
复制链接

扫一扫