H5和PC实现点击复制当前文字的功能,兼容ios,安卓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head>

<body>
    <button type="button" class="btn btn_copy_text" data-clipboard-text="要复制的内容111111">1111111111111111</button>
    <button type="button" class="btn btn_copy_text" data-clipboard-text="要复制的内容222">2222222222222222</button>
    <button type="button" class="btn btn_copy_text" data-clipboard-text="要复制的内容333">33333333333333</button>
    <script>
        // 重要提示1 Clipboard  改成ClipboardJS 不然会提示错误的 绑定button上,避免ios的不兼容性问题
        console.log(ClipboardJS)
            //复制文本
            var clip = new ClipboardJS('.btn_copy_text');
            clip.on('success', function (e) {
                e.trigger.interHTML = "复制成功";
            });
       
    </script>

</body>

</html>
posted @ 2018-12-20 15:37  曾经的水哥  阅读(492)  评论(0编辑  收藏  举报