clipboard复制不到bootstrap模态窗口中内容的问题

Clipboard.js对内容复制功能进行了封装，方便了我们的使用，正常情况下几行代码就可以搞定的内容复制功能，然而在复制bootstrap modal窗口中的内容时却失效了。

找了好久之后终于找到了问题的原因，原来模态框加载之后被添加了 tabindex="-1"的属性值。

解决方案：只要在复制内容动作之前将tabindex="-1" 这个属性去掉即可

<div class="modal fade bs-example-modal-lg" id="testModal" role="dialog" tabindex="-1">
    <button type="button" title="复制" class="btn" data-clipboard-text="被复制内容">复制</button>
</div>

<script>
    $('#testModal').removeAttr('tabindex');
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e){
        console.log('复制内容', e.text);
    });
    clipboard.on('error', function(e){
        console.log('复制失败');
    });
</script>

 

下载clipboard.js