尝试了JS下两种复制到剪贴板的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input id="copy1" width="200px"/>
<button id="btnCopy1">复制到剪贴板1</button>
</div>
<div>
<input id="copy2"/>
<button id="btnCopy2">复制到剪贴板2</button>
<button id="revoke">撤销授权</button>
</div>
<div></div>
<script>
document.getElementById("btnCopy1").addEventListener("click", function(btn, ev) {
console.log("btnCopy1 onClick");
let inputCopy = document.getElementById("copy1");
inputCopy.select();
document.execCommand("copy", false);
});
document.getElementById("btnCopy2").addEventListener("click", function(btn, ev) {
console.log("btnCopy2 onClick");
// 申请 Clipboard 权限
navigator.permissions.query({name: "clipboard-write"}).then(function(permissionStatus){
if (permissionStatus.state =="granted") {
alert(permissionStatus.name + " : granted");
}else if(permissionStatus.state =="denied"){
alert(permissionStatus.name + " : denied");
}else if(permissionStatus.state =="prompt"){
alert(permissionStatus.name + " : prompt");
}else {
alert("Unkown")
}
permissionStatus.onchange = function() {
alert(`状态改变 ${this.state}`)
}
})
let inputCopy = document.getElementById("copy2");
navigator.clipboard.writeText(inputCopy.value).then(function(){
alert("clipboard success")
}, function(){
alert("clipboard fail")
});
})
document.getElementById("revoke").addEventListener("click", function(btn, ev){
console.log("revoke onClick");
// 已被官方废除，>> https://developer.mozilla.org/en-US/docs/Web/API/Permissions/revoke
// navigator.permissions.revoke({name: "clipboard-write"}).then(function(result){
// alert(result.state)
// })
})
</script>
</body>
</html>
