標籤：cti png images tar dex 分享 console 設定 nodelist
最近，做了一個切圖的小項目
主要內容是號的推廣頁面，上面會有精美的圖片和號:)
點擊按鈕，會複製到粘貼板上，自己去裡面粘貼搜尋:),懶人會進行一系列複雜操作麼，不看好
首先，百度了一下，看中clipboard庫，純js相容手機端，好激動:)
clibboard的GitHub地址，使用非常簡單，自己看demo目錄的內容，源碼看的方，還是不知道如何?的，求教
主要思路，就點擊按鈕，自動將文本複製到剪貼簿。
選擇使用其中的function，可以使用ajax從服務端擷取號
官網的方案
1 new Clipboard(‘.btn‘, {2 text: function(trigger) {3 return trigger.getAttribute(‘aria-label‘);4 }5 });
Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements.
可以選擇三種方式，來確定點擊哪兒觸發點擊。
根據業務需要，使用zepto來擷取json
1 // 添加擷取json 2 Zepto(function ($) { 3 $.getJSON(‘account/data.json‘, ‘?time=‘+new Date().getTime(), function (data) { 4 let name = data.name; 5 6 document.getElementById("num").innerHTML = name; 7 8 var clipboard = new Clipboard(‘.btn‘, { 9 text: () => name10 });11 12 clipboard.on(‘success‘, (e) => {console.log(e)13 alert(‘號已複製，請開啟，點擊右上方+號，選擇添加朋友，粘貼搜尋‘)});14 15 clipboard.on(‘error‘, (e) => console.log(e));16 });
效果如下：
發現點擊，有彈窗，仔細觀察會發現，在body底部出現了一串代碼，hack方式，隱藏文本
下面是簡單的html，有興趣的同學可以自己試試
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>測試</title> 6 <script src="dist/clipboard.min.js"></script> 7 <script src="dist/zepto.min.js"></script> 8 <script src="static/js/changeAccount.js"></script> 9 <style>10 .bg{11 width:100%;12 height: 1500px;13 background-color: #ccc;14 text-justify: inter-cluster;15 font-size: 100px;16 }17 </style>18 </head>19 <body>20 <div class="btn">21 <div class="bg">22 背景23 </div>24 <p id="num"></p>25 </div>26 </body>27 </html>View Code
在手機點擊無任何效果，這個大坑踩了好久才知道，
具體怎麼踩得不好意思說了，取巧終究還是要吃虧，，，
仔細地又看了一遍demo，發現多數都是<button class="btn">
索性照著官方來，
<button class="bg">
背景
</button>
哎，心累，早這樣不就好了，至於為什麼剛開始不使用button，都是設計稿的鍋，竟然沒有按鈕，還要
能點擊複製，
頁面有很多背景圖片和內容，初步想法是，將按鈕設定全屏，z-index=-1；
發現，紅，綠地區點擊無效，灰色地區可以複製，此時確信了，手機端點擊是無法穿透的，只能擷取最上面一層
改變一下思路，將按鈕放在最上一層，不就可以了嗎，你想到什麼了
1 z-index:999;2 opacity:0;View Code
最後，想看完整項目的，請移步個人GitHub
解決clipboard手機端無法複製的一種思路
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
