解決clipboad.js在移動端復制失敗的問題
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在移動端復制失敗的問題