具体实现如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击按钮复制内容到粘贴板</title>
<style>
body {
text-align: center;
}
#p1 {
line-height: 150px;
font-size: 40px;
}
#source {
font-size: 18px;
}
.wrapper {
margin-top: 50px;
}
.btn {
width: 300px;
height: 120px;
background-color: #4da2fd;
color: #fff;
font-size: 20px;
text-decoration: none;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#result {
width: 100%;
line-height: 30px;
color: #555;
font-size: 35px;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- <input id="source" type="text" value="这是默认值"> -->
<!-- <textarea id="source" rows="5">这是默认值</textarea> -->
<p id="p1">将要复制的内容</p>
<div class="wrapper">
<a class="btn" onclick="copyText()">复制文本内容</a>
</div>
<div class="wrapper">
<a class="btn" onclick="copyLink()">复制网站链接</a>
</div>
<p id="result"></p>
<script>
/**
* 方法1: 创建一个 input 标签,执行 input 的 select 方法,然后执行 document.execCommand("Copy") 实现复制
*
* 注意事项:
* - input 标签不能是 display: none; (使用定位把 input 定位到窗口之外)
* - 链接: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
*/
function copyText() {
var inputEle = document.createElement('input');
inputEle.style.position = 'fixed';
inputEle.style.left = '100000px';
// inputEle.value = document.getElementById("source").value;
inputEle.value = document.getElementById("p1").innerText;
document.body.append(inputEle);
inputEle.select();
var isSuccess = document.execCommand("copy");
document.getElementById('result').innerText = isSuccess ? "文字复制成功!" : "文字复制失败!";
document.body.removeChild(inputEle);
}
/**
* 方法2: 使用 clipboard.js, 具体用法看对应文档
*
* 注意事项:
* - clipboard.js 实现和方法1大体一样
* - 链接: https://github.com/zenorocha/clipboard.js/tree/2b48909ff1fb6da1378a3a6bc81a61a67f629dc2
*/
/**
* 方法3: 使用 navigator.clipboard.writeText 方法实现复制
*
* 注意事项:
* - 这种方法在浏览器 console 控制台直接调用会失败
* - 链接: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
* - 链接: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
*/
function copyLink() {
var siteUrl = window.location.href;
navigator.clipboard.writeText(siteUrl).then(function () {
/* clipboard successfully set */
document.getElementById('result').innerText = "网址复制成功!";
}, function () {
/* clipboard write failed */
document.getElementById('result').innerText = "网址复制失败!";
});
}
</script>
</body>
</html>
