您的当前位置:首页>全部文章>文章详情
html 一键复制功能
发表于:2022-01-22浏览:24次TAG: #一键复制

HTML 代码

<div class="content-copy">
  <div id="account-59" onclick="copyText('account-59')">wuzengfecom</div>
  <img class="content-copy-img" src="/static/admin/images/copy.png" onclick="copyText('account-59')">
</div>

CSS 代码

.content-copy{
 display: flex;
 justify-content: center;
 align-items: center;
}
.content-copy-img{
 width: 15px !important;
 height: 15px !important;
}

js 代码

function copyText(id) {
    const range = document.createRange();
    const input = document.getElementById(id);
    range.selectNodeContents(input);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range)
    
    document.execCommand("copy"); // 执行浏览器复制命令
}

当点击div 时 会自动选中此div内的文字,然后复制到系统粘贴板

标签云