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；以及 οnclick="",这个空事件，原因是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);
});

 

转载于:https://www.cnblogs.com/web-wjg/p/8622488.html