clipboard.js 方法高级使用方法

clipboard.js方法高级使用方法,如果你不喜欢像之前一样设置html的属性来实现复制，clipboard.js通过了api方式实现更佳自由的方式来实现复制功能。

text 自定义函数复制

<!-- Trigger -->
<input id="btn1" type="button" onclick="copy('#btn1','复制内容1')" value="点击复制">
<input class="btn2" type="button" onclick="copy('.btn2','复制内容2')" value="点击复制">
<script>
   /* 自定义复制函数
    * obj 触发器元素对象或id、class
    * text 需要复制的内容
    */
  function copy(obj, text) {
    var clipboard = new ClipboardJS(obj, {
        text: function (trigger) {
            return text;
        }
    });

    clipboard.on('success', function (e) {
        e.clearSelection();
        //document.getElementById("msg").innerHTML = "复制成功";
    });

    clipboard.on('error', function (e) {
        //document.getElementById("msg").innerHTML = "复制失败";
    });
}
</script>

在线试一试

target 自定义复制对象

<!-- Target -->
<div id="op">需要被复制的内容</div>
<!-- Trigger -->
<input id="btn1" type="button" onclick="copy()" value="复制内容1">
<script>
    //自定义复制函数  
    function copy() {
        var clipboard = new ClipboardJS('#btn1', {
            target: function (trigger) {
                //需要被复制内容的Dom元素对象
                return document.getElementById("op");
            }
        });

        clipboard.on('success', function (e) {
            e.clearSelection();
            document.getElementById("msg").innerHTML = "复制成功";
        });

        clipboard.on('error', function (e) {
            document.getElementById("msg").innerHTML = "复制失败";
        });
    }
</script>

在线试一试

container 接近焦点会发生变化的问题

比如弹出bootstrap模态框，clipboard对模态框中按钮绑定复制事件时，焦点会发生变化，这时就需要指定焦点所在容器

//自定义复制函数  
function copy() {
    var clipboard = new ClipboardJS('#模态对话框内复制按钮的id', {
        container: document.getElementById('模态对话框id'),
        text: function (trigger) {  
            return '需要被复制的字符串';
        }
    });

    clipboard.on('success', function (e) {
        e.clearSelection();
        document.getElementById("msg").innerHTML = "复制成功";
    });

    clipboard.on('error', function (e) {
        document.getElementById("msg").innerHTML = "复制失败";
    });
}