快捷導(dǎo)航

clipboard.js在移動(dòng)端復(fù)制失敗的解決方法

更新時(shí)間：2018年06月13日 11:32:37 作者：Damon風(fēng)

最近在使用clipboard.js碰到的一個(gè)小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧

1.前沿

一句話介紹下clipboard.js：實(shí)現(xiàn)了純 JavaScript (無 Flash)的瀏覽器內(nèi)容復(fù)制到系統(tǒng)剪貼板的功能。

在項(xiàng)目中使用clipboard.js插件去實(shí)現(xiàn)點(diǎn)擊按鈕，復(fù)制一段網(wǎng)址到剪切板的功能。功能做好后，一開始無論這pc端還是移動(dòng)端都能正常使用。突然某一天測(cè)出了一個(gè)bug：移動(dòng)端復(fù)制失敗，pc端是ok的。簡直一臉懵逼。。。

遇到這個(gè)bug，我第一個(gè)思考到的是，這是個(gè)常用的插件，網(wǎng)上應(yīng)該有現(xiàn)成的解決方法。網(wǎng)友分享的方法是：把綁定data-clipboard-target屬性的按鈕標(biāo)簽從div換成button。親測(cè)后，不起效果，可能不是一個(gè)原因?qū)е碌?。通過摸索，找到了bug的原因和可解決方案。我相信，在移動(dòng)端的項(xiàng)目中使用到clipboard插件，有很大的概率會(huì)踩到這個(gè)坑，

下面就講講解決這個(gè)bug的歷程。

2、透過表象思考

思考：為什么隨著項(xiàng)目的進(jìn)行，復(fù)制功能會(huì)失效？我的猜想是：可能是全局禁用了一些默認(rèn)事件，導(dǎo)致了clipboad.js內(nèi)部實(shí)現(xiàn)復(fù)制功能與禁用的默認(rèn)事件沖突，所以才復(fù)制失敗。按這個(gè)猜想去排查的兩個(gè)思路：

　　1、去看clipboard的源碼了，找到復(fù)制功能的具體實(shí)現(xiàn)原理，與哪些事件和默認(rèn)事件有關(guān)聯(lián)，再去尋找沖突點(diǎn)。

　　2、業(yè)務(wù)代碼中去排查，哪里做了全局事件的配置，這些配置一個(gè)個(gè)排查，找出影響了clipboad復(fù)制功能的配置。

第一種思路相對(duì)牛皮，學(xué)習(xí)了clipboard原理也是極好的。第二種，是比較笨拙的方法，但是有時(shí)候是比較有效的，有可能在少量的試驗(yàn)中就找到了bug點(diǎn)。但是經(jīng)常是找不出來的，所以只可花少量的時(shí)間去試驗(yàn)第二種方法。其實(shí)，這里還有第三種思路，就是換一種方式去實(shí)現(xiàn)復(fù)制功能，可能新的實(shí)現(xiàn)方式不受影響，可兼容各平臺(tái)。clipboard輪子已經(jīng)造好了，就是為了解決復(fù)制功能兼容性為目標(biāo)誕生的。畢竟還是要相信輪子的實(shí)力。通讀文檔，有兩種方式去實(shí)現(xiàn)復(fù)制功能。

1、我使用的是方法1: html屬性綁定。

如下：

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
 Cut to clipboard
</button>

這個(gè)就是出現(xiàn)上述bug所使用的方法。

2、改成了文檔說明的另外一種實(shí)現(xiàn)方法2: js配置參數(shù)。如下：

new ClipboardJS('.btn', {
 text: function(trigger) {
  return trigger.getAttribute('aria-label'); // 返回需要復(fù)制的內(nèi)容
 }
});

改成方法2后，成功解決了移動(dòng)端復(fù)制失敗的問題。到此為止，若不深究，bug已經(jīng)被解決，任務(wù)完成。

3、尋找原因

可以說，“投機(jī)取巧”，花最小的代價(jià)，解決了bug。問題雖然解決了，但心有不甘，想找出bug出現(xiàn)的原因?；仡^認(rèn)真看了下官方文檔，在對(duì)方法的描述中，看到這么一段話：

大意就是：復(fù)制或者剪切操作之后會(huì)選中對(duì)象，這個(gè)對(duì)象會(huì)通過觸發(fā)一些cases（事件）去捕獲和反饋信息。

重點(diǎn)就是：第一行中的“what has been selected after a copy/cut operation”這句話。根據(jù)描述，復(fù)制后的對(duì)象是被選中狀態(tài)（selected）的。

然后我立馬想到一個(gè)事情。在我的項(xiàng)目中，之前有一個(gè)同事為了實(shí)現(xiàn)長按不選中文本的功能，把長按選中文本的功能全局禁用了。。。。。用的方法是以下css

// 禁止選中html,body{
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 -webkit-touch-callout: none;
 -webkit-text-size-adjust: none;
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
}

找到疑點(diǎn)，通過試驗(yàn)，確實(shí)是這個(gè)段css導(dǎo)致方法1在移動(dòng)端復(fù)制功能失敗。（為什么pc端不失效，移動(dòng)端失效，這歸屬于兼容吧，具體原因還不懂。。。）

再回頭思考，方法1方法2的區(qū)別?？纱竽懲茰y(cè)：方法1，受css：user-select的影響，應(yīng)該跟內(nèi)部實(shí)現(xiàn)原理有關(guān)。方法2，在new生成實(shí)例的時(shí)候傳入text參數(shù)，通過js返回復(fù)制內(nèi)容，所以不受css：user-select的影響。一切推測(cè)和表象，達(dá)成高度切合。到這里，我只能說，這只是一個(gè)強(qiáng)有力的推測(cè)。而這個(gè)推測(cè)是否完全成立，還得研究clipboard.js源碼的實(shí)現(xiàn)原理，才能真正判斷。

問題點(diǎn)找到，解決方案也有了。此bug暫告一個(gè)段落?。?/p>

舒服（放松臉）。。。。。

4、總結(jié)：

1、解決問題的思路有很多。按照邏輯思維，一般是根據(jù)問題的表象去分析問題，得出幾種思路后，再去驗(yàn)證，最終解決問題。但有時(shí)候先不糾結(jié)于問題的表象和原因，條條大路通羅馬，換一種方式去實(shí)現(xiàn)功能，也不錯(cuò)。不管哪種方式去解決，都有不一樣的付出和收獲。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: