JS 实现一键复制文本内容

news2025/2/25 16:37:59

1、演示：

2、代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一键复制</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            >button {
                background-color: #fff;
                border: 2px solid #ccc;
                height: 32px;
                border-radius: 5px;
                padding: 5px 15px;
            }
            >span {
                line-height: 32px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <span>如：</span>
        <span id="text">生活如意，事业高升。</span>
        <button id="btn" onclick="copy()">一键复制</button>
    </div>
</body>
<script>
    function openMessage(value) {
        const msg = document.createElement('div');
        msg.style.height = '35px';
        msg.style.lineHeight = '35px';
        msg.style.padding = '5px 10px';
        msg.style.position = 'fixed';
        msg.style.top = '50%';
        msg.style.left = '50%';
        msg.style.transform = 'translate(-50%, -50%)';
        msg.style.backgroundColor = 'rgba(0, 0, 0, .3)';
        msg.style.textAlign = 'center';
        msg.style.color = 'white';
        msg.style.borderRadius = '15px';
        msg.textContent = value;
        document.body.appendChild(msg);

        setInterval(() => {
            document.body.removeChild(msg);
        }, 5000);
    }
    function copy() {
        const text = document.getElementById('text')
        const textarea = document.createElement('textarea');
        textarea.readOnly = 'readonly';
        textarea.style.position = 'absolute';
        textarea.style.left = '-9999px';
        textarea.value = text.innerText;
        document.body.appendChild(textarea);
        textarea.select();
        const result = document.execCommand('Copy');
        if (result) {
            // console.log('复制成功');
            openMessage('复制成功')
        } else {
            openMessage('操作失败')
        }
        document.body.removeChild(textarea);
    }
</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1278826.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！