點擊按鈕實現自動複製功能，解決ios不兼容問題

前言

昨天接到一個需求，實現一個推廣頁，其中有一個功能是點擊按鈕自動複製文字，看起來so easy。萬萬沒想到，就這個自動複製功能，花費了我幾個小時，接下來就是個人填坑過程，過程艱辛，結果簡單。

實現原理

參考平時複製文本的思路，選中文本，ctrl+c或右鍵菜單複製。那麼只要咱們能利用js選中文本，而且能找到瀏覽器複製選中文字到剪貼板的調用方法，咱們就能實現這個需求。

實現過程與方法

1.本身手擼js實現

html代碼：

<div id="copy_wx">
    <span>點擊複製</span>
    <iput id="id_text" type="text" value="複製的內容" readonly style="position: absolute;left: -1000px;"/>
</div>
複製代碼

js代碼:

$('#copy_wx').click(function(){
    $('#id_text').select();//選中文字
    document.execCommand('copy');//拷貝當前選中內容到剪貼板
})
複製代碼

發現蘋果手機複製不了，用can I use查，才知道，是onselect的兼容性問題，安卓手機沒有問題，可是蘋果手機不兼容。

不要緊，此路不通，咱可另尋出路，幾番百度，終於找到選中文字的另外一個方法——HTMLInputElement.setSelectionRange ，兼容性良好，就是它沒錯了。HTMLInputElement.setSelectionRange 方法能夠從一個被 focused 的 <input>元素中選中特定範圍的內容，這個方法須要結合focus事件一塊兒用。

$('#copy_wx').click(function(){
    var element = $('#id_text')
    element.focus();
    element.setSelectionRange(0, element.val().length);
    document.execCommand('copy');//拷貝當前選中內容到剪貼板
    element.blur();
})
複製代碼

除了本身手擼代碼，網上也提供了另一種能夠更優雅的實現複製粘貼功能。下面咱們簡單介紹一下clipboard插件，以及遇到的一些問題。

2.clipboard插件實現

這是一個不須要依賴flash或者其餘複雜框架的輕量插件，詳細的能夠參考clipboard文檔

html代碼：
<div id="btn1" data-clipboard-text="555">
    <span>點擊複製4</span>
</div>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.6/clipboard.min.js"></script>
js代碼:
var clipboard = new Clipboard('#btn1')
clipboard.on('success', e => {
    alert('複製成功');
});
clipboard.on('fail', e => {
    alert('複製失敗');
})
複製代碼

很是簡單好用，但開始測試時，發現有些iphone手機（如：iphone6）會複製不成功，後面改用如下方法：

<div
    id="btn1" data-clipboard-action="copy" data-clipboard-target="#id_text"
>
    <span>點擊複製</span>
    <input id="id_text" type="text" value="666"
    />
</div>
複製代碼

複製的文字是在視圖窗口可見的狀態下，是能夠複製成功的，可是咱們的需求是但願複製的文字不須要可見的。因而又出現了新的問題，若是將input用絕對定位position: absolute;left: -9999px移出視圖窗口，或者用層級position: absolute;z-index: -1;置於按鈕之下，以達到文字消失的視覺效果，文字看不見了，但在一些iphone手機（如：iphone6）複製粘貼功能也沒了。（說明一下：當時這個需求是在基於JQuery開發的項目中的，但後面我本身在vue腳手架的demo實驗，這個問題不存在。這個問題目前我不知道是啥問題，讀者若是知道的話，歡迎留言。）

莫非就沒有解決方法了？不，咱們還有一個比較笨的方法，咱們能夠將文字的顏色設置成與按鈕的背景色同樣，這樣一樣能夠達到視覺不可見的效果。固然，有其餘的解決方案的話，也歡迎留言。

總結

這個問題不大，但有時找不到方法的話也挺耗時的，但願這篇文章能夠給某些踩坑中的同窗一點幫助。