解決clipboad.js在移動端複製失敗的問題

標籤：問題   bsp   配置   關聯   禁用   code   成功   描述   失效   

1.前沿

　　在項目中使用clipboad.js去實現點擊按鈕，自動複製一段網址到剪下板。一開始使用正常，pc端移動端都正常。突然有一個測試提了個bug，複製失敗。簡直一臉懵逼。。。

　　下面就講講解決這個bug的曆程。

 

2、透過表象思考

　　1、遇到這個bug，我第一個思考到的是，這是個流行的主流外掛程式，網上應該有現成解決方案。然後搜了網上的方法，把綁定data-clipboard-target屬性的按鈕標籤從div換成button，還是沒用。網上的解決方案失敗。

　　2、思考：為什麼隨著項目的進行，複製功能會失效。是不是全域禁用了一些預設事件，導致了clipboad.js內部實現複製功能與禁用的預設事件衝突，所以才複製失敗。按這個思路去排查的兩個方法：1、去看clipboard的源碼了，找到複製功能的具體實現，與哪些事件和預設事件有關聯，再去尋找衝突點。2、業務代碼中去排查，哪裡做了全域事件的配置，這些配置一個個排查哪個影響了clipboad複製功能的實現。第一種相對牛皮，學習了原理也是極好的成長。第二種，是比較蠢的方法，有時候是比較有效，可能在少量的實驗中就找到了bug點，有時候是找不出來的。只可花少量的時間去實驗第二種方法。其實，這裡還有另一種方法，就是換一種方式去實現複製功能。輪子已經造好了，根據文檔有兩種方式去實現複製功能。

　　我一開始所使用的是方法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>

 

　　然後實驗改成了文檔說明的另外種實現方法2: js綁定複製內容。如下：

new ClipboardJS(‘.btn‘, {    text: function(trigger) {        return trigger.getAttribute(‘aria-label‘);    }});

　　第二種方法成功解決了移動端複製失敗的問題。

 

3、尋找原因 

　　可以說，“投機取巧”，花最小的代價，解決了問題。問題雖然解決了，有時間總得找找bug的原因吧。回頭認真看了下文檔，在對方法1（移動端複製失敗的那個方法）的描述中，看到這麼一段話：

　　大意就是：複製或者剪下操作之後會選中對象，這個對象會通過觸發一些cases（事件）去捕獲和反饋資訊。

　　重點來了：上面的這句話是重點，what has been selected after a copy/cut operation.  根據描述，複製後的對象是要被（selected）選中狀態的。

　　突然想起來，業務代碼中，長按選中文本的功能被全域禁用了。。。。。用的是以下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;}

　　找到疑點，經實驗，確實是這個原因引起的，導致方法1複製功能失敗。

　　再回頭思考，方法1方法2的區別。推測：方法1，受css：user-select的影響，應該跟內部實現原理有關。方法2，在new執行個體中，傳入text參數，通過js擷取複製內容，所以不受css：user-select的影響。一切推測和表象，達成高度切合。這隻是一個強有力的推測，最後最有效論證，還得研究clipboad源碼的實現。

　　問題點找到，解決方案也有了。此bug暫告一個段落！！

 

4、總結：

　　1、解決問題的思路有很多。有時候根據問題的表象去分析問題，能有幾種思路去排查。有時候不必糾結於問題的表象和原因，條條大路通羅馬，換一種方式去實現功能，也不錯。不管哪種方式去解決，都有不一樣的付出和收穫。

 

解決clipboad.js在移動端複製失敗的問題