使用clipboard.js实现复制文本

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用clipboard.js实现复制文本</title>
</head>
<body>
<button data-demo="1" data-clipboard-text="PHP是世界上最好の语言">点击复制</button>
<br>
<br>
<input id="input-demo" type="text" value="从入门到放弃" readonly>
<button data-demo="2" data-clipboard-target="#input-demo">点击复制</button>
<br>
<br>
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript">
var clipboard = null;

//========== 点击按钮直接复制·开始 ==========//
clipboard = new ClipboardJS('button[data-demo="1"]');

clipboard.on('success', function(e) {
    alert('复制成功');
});

clipboard.on('error', function(e) {
    alert('复制失败');
});
//========== 点击按钮直接复制·结束 ==========//

//========== 从文本输入框复制·开始 ==========//
clipboard = new ClipboardJS('button[data-demo="2"]');

clipboard.on('success', function(e) {
    alert('复制成功');
});

clipboard.on('error', function(e) {
    alert('复制失败');
});
//========== 从文本输入框复制·结束 ==========//
</script>
</body>
</html>

Copyright © 2024 码农人生. All Rights Reserved