clipboard 在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"/>
    
    <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>

运行结果如下：结果如下：尺寸：