html5: 復制到剪貼板 clipboard.js


1、使用clipboard.min.js工具,引用此js
  注意事項:
    IOS微信網頁開發中,若使用此工具來開發復制功能,則需要在超鏈接/按鈕上新增 onclick=" "

2、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
                    })
                }        

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM