javascript复制内容到剪贴板:
<style>
#copy-link{
position: relative;
z-index: 2;
}
#copy-button{
display: none;
color: #000;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -42px;
border: 1px solid #bcbcbc;
z-index: 3;
}
.copy-box{
box-sizing: border-box;
width: 80px;
height: 22px;
line-height: 20px;
margin: 5px 10px;
font-weight: normal;
border: 1px solid #1a8d8d;
color: #1a8d8d;
}
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #bcbcbc;
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const copyLink = document.getElementById('copy-link');
const copyButton = document.getElementById('copy-button');
copyLink.addEventListener('mouseenter', () => {
copyButton.style.display = 'block';
});
copyLink.addEventListener('mouseleave', () => {
copyButton.style.display = 'none';
});
copyButton.addEventListener('click', function(event) {
event.stopPropagation();
event.preventDefault();
const href = copyLink.getAttribute('href')
if (navigator.clipboard && window.isSecureContext){
navigator.clipboard.writeText(href)
}else {
const tempInput = document.createElement('input');
tempInput.value = href;
document.body.appendChild(tempInput);
tempInput.select();
try {
document.execCommand('copy');
} catch (err) {
console.error('Unable to copy link to clipboard:', err);
} finally {
document.body.removeChild(tempInput);
}
}
});
});
</script>
