html5: 复制到剪贴板 clipboard.js

时间 2019-12-11 标签 html5 html 5 复制剪贴板 clipboard.js clipboard js

一、使用clipboard.min.js工具，引用此js
　　注意事项：
　　　　IOS微信网页开发中，若使用此工具来开发复制功能，则须要在超连接/按钮上新增 onclick=" "微信

二、clipboard使用工具

　　　　　　　　　<li class="flex ai-center jc-sb">
        　　　　　　　<div class="reportCode">
                        <input class="fs-18" value="3VDK2109" readonly="readonly">
                        <div class="reportDate fs-13">2019.1.21</div>
                    </div>
                    <div class="reportEdit flex">
                        <div class="nextBtn fs-14 enable copyBtn" data-clipboard-text="Just because you can doesn't" onclick="">复制</div>
                        <div class="nextBtn fs-14">删除</div>
                    </div>
                </li>

    　　　　　　　 //复制
                var clipboard = new ClipboardJS('.copyBtn');//点击class为copyBtn的按钮复制内容
                
                clipboard.on('success', function(e) {
                    e.clearSelection();
                    showMsg('复制成功');
                });
                
                clipboard.on('error', function(e) {
                    showMsg('您的手机暂不支持，请长按进行复制');
                });
                function showMsg(data){
                    layer.open({
                        content: data,
                        skin: 'msg',
                        time: 2
                    })
                }