最近有个项目要求点击卡片上某一行文字时,将文字内容复制到剪切板,调研了一下目前的通用方案,最终采取clipboard.js
实现。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- 1. Define some markup -->
<div class="copy-text" style="cursor: pointer" title="点击即可复制">123467</div>
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
document.addEventListener("click", click, true);
function click(e) {
select_content_text = e.srcElement.innerHTML
}
var clipboard = new ClipboardJS('.copy-text', {
text: function(trigger) {
return select_content_text;
}
});
clipboard.on('success', function(e) {
if (select_content_text) {
select_content_text = "";
}
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
github地址:clipboard github
官方网站: 官方网站