解決clipboard手機端沒法複製的一種思路

時間 2019-11-10

標籤解決 clipboard 手機沒法複製一種思路简体版

原文原文鏈接

最近，作了一個切圖的小項目html

主要內容是微信號的推廣頁面，上面會有精美的圖片和微信號:)node

點擊按鈕，會複製到粘貼板上，本身去微信裏面粘貼搜索:),懶人會進行一系列複雜操做麼，不看好git

首先，百度了一下，看中clipboard庫，純js兼容手機端，好激動:)github

clibboard的GitHub地址，使用很是簡單，本身看demo目錄的內容，源碼看的方，仍是不知道如何實現的，求教web

主要思路，就點擊按鈕，自動將文本複製到剪貼板。ajax

選擇使用其中的function，可使用ajax從服務端獲取微信號json

官網的方案微信

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.ide

能夠選擇三種方式，來肯定點擊哪兒觸發點擊。測試

根據業務須要，使用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: () => name
10         });
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>