css复制到剪贴板

CSS复制到剪贴板是一个方便的功能，它可以帮助你在网站开发中更加高效地工作。以下是使用CSS复制到剪贴板的方法。

.copy-btn {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #2196f3;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
}
.copy-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5rem;
    height: 100%;
    background-color: #1565c0;
    transition: width 0.3s ease-in-out;
}
.copy-btn:hover::before {
    width: 100%;
}
.copy-btn.success::before {
    background-color: #4caf50;
}
.copy-btn.error::before {
    background-color: #f44336;
}
    

首先，在CSS文件中定义一个包含所有复制功能的class。将这个class添加到需要复制的文本的容器中。我们可以使用JavaScript中的Clipboard API来实现复制到剪贴板的功能：

const copyBtns = document.querySelectorAll('.copy-btn');
     // 获取所有的复制按钮copyBtns.forEach(btn =>
 {
     // 对于每个按钮const textToCopy = btn.previousSibling.textContent.trim();
     // 获取需要复制的文本btn.addEventListener('click', () =>
 {
     // 点击按钮时navigator.clipboard.writeText(textToCopy) // 将文本复制到剪贴板.then(() =>
 {
     // 成功复制时btn.classList.add('success');
    setTimeout(() =>
 {
    btn.classList.remove('success');
}
    , 1000);
}
    ).catch(() =>
 {
     // 复制失败时btn.classList.add('error');
    setTimeout(() =>
 {
    btn.classList.remove('error');
}
    , 1000);
}
)}
    );
}
    );
    

以上代码会为所有的复制按钮（带有.copy-btn class）添加单击事件，当单击按钮时，会使用Clipboard API将相邻文本复制到剪贴板。如果复制成功，按钮将加上.success class，并在1秒后将其删除。如果复制失败，则按钮将加上.error class，并在1秒后将其删除。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！