再使用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); });