在html页面中的使用案例

在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard例子</title> 
    <script src="https://php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
</head>
<body style="padding:10px;">
    <input id="foo" value="https://www.bian-jie.cn"/>
    <!-- Trigger -->
    <input class="btn" id="btn" data-clipboard-target="#foo" type="button"  value="复制">
    <script>
        //初始化对象
        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);
            //注销对象
            e.clearSelection();
            document.getElementById("btn").value="复制成功";
        });

        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            document.getElementById("btn").value="复制失败";
        });
    </script> 
</body>
</html>
上一条 下一条

版权声明：他人将便捷教程网提供的内容与服务用于商业、盈利、广告性目的时，需得注明出处，转载时请附上原文出处链接及本声明。

原文链接：https://jc.bian-jie.cn/search/JC_clipboard/1/4991.html

点击加入QQ交流群：{{qqQNum}}