clipboard.js兼容ios

再使用clipboard.js做項目時，項目需求是在非input,button等可以點擊的標簽（span，p，div）上實現點擊來復制內容，在PC端和移動端android沒問題，但是到了ios毫無反應，就是渣渣，調兼容調了好大一會兒，總算解決了這個bug，現在把方法分享給大家，

其實不算復雜，主要是給標簽添加樣式，就是自己不知道ios系統的標簽特性：

一開始的html代碼如下：

<span id="foo" data-clipboard-target="#foo" data-clipboard-action="copy">哈哈,我被復制了</span>

上面的寫法，在android沒問題，正常實現，ios毫無反應，修改后如下：

<span style="cursor: pointer" onclick="" class="btn" id="foo" data-clipboard-target="#foo"  data-clipboard-action="copy" >哈哈，這下ios可以復制我了</span>

注意給span加了一個css屬性：cuosor:pointer；以及 onclick="",這個空事件，原因是ios默認非點擊標簽不具有點擊效果，所以給這些標簽添加相關屬性，這樣系統可以識別出來！

 

js代碼如下：

 

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert('復制成功');
    e.clearSelection();                
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});