原生javascript加css和html做一键复制功能。
效果:
javascript代码部分:
//一键复制
const copyBtn = document.querySelector('.copy-btn');
const content = document.querySelector('.content');
const handleCopy = () => {
const range = document.createRange();
range.selectNode(content);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execmand('copy');
window.getSelection().removeAllRanges();
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.innerHTML = '<i class="fa fa-check"></i> 复制成功';
document.body.appendChild(tooltip);
setTimeout(() => {
tooltip.remove();
}, 2000);
};
copyBtn.addEventListener('click', handleCopy);
css代码:
.copy-btn {
display: inline-block;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.tooltip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 123, 255, 0.8);
color: #fff;
padding: 8px 16px;
border-radius: 4px;
display: flex;
align-items: center;
}
.tooltip i {
margin-right: 8px;
}
HTML代码
<button class="copy-btn">复制</button>
QQ20230601201038.png(1.37 KB, 下载次数: 35)
2023-6-1 20:12 上传
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至201542412@QQ.com举报,一经查实,本站将立刻删除。
相关推荐
-
css在中去除button按钮默认自带的样式的方法
这段代码将清除按钮的大部分默认样式,让它看起来更像一个普通的HTML元素,而不是一个浏览器风格化的按钮。您可以根据需要进一步定制这些样式。
-
用css清除html中li标签列表自带的点的方法
标签自带的点,您可以使用CSS的list-styl-ty属性。这个属性允许您控制列表项的标记样式,包括去除标记。以下是具体操作方法
-
htm加css和js实现手机端隐藏查看剩余点击展开,剩余%未阅读
htm加css和js实现手机端隐藏查看剩余点击展开,剩余%未阅读js部分代码:html部分css部分:其中.rticl-body是第一内容元素,.contnt第二元素...
-
css 技巧给元素一个左右边距的方法
在 CSS 中,给一个元素设置左右边距有多种方式,最常用的是通过 margin 属性。这里有几种不同的方法来设置左右边距:
-
如何在uniapp中实现用户注册和登录认证
如何在uni中实现用户注册和登录认证随着移动应用的普及,用户注册和登录已成为一个应用开发中不可或缺的功能。在uni中,我们可以借助一些插件和I来实现用户注册和登录认证功能。本文将介绍如