再使用clipboard.js作項目時,項目需求是在非input,button等能夠點擊的標籤(span,p,div)上實現點擊來複制內容,在PC端和移動端android沒問題,可是到了ios毫無反應,就是渣渣,調兼容調了好大一下子,總算解決了這個bug,如今把方法分享給你們,css
其實不算複雜,主要是給標籤添加樣式,就是本身不知道ios系統的標籤特性:html
一開始的html代碼以下:android
<span id="foo" data-clipboard-target="#foo" data-clipboard-action="copy">哈哈,我被複制了</span>
上面的寫法,在android沒問題,正常實現,ios毫無反應,修改後以下: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默認非點擊標籤不具備點擊效果,因此給這些標籤添加相關屬性,這樣系統能夠識別出來!spa
js代碼以下:code
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); });