csdn的复制代码功能如何实现

news2024/11/18 5:38:47

在这里插入图片描述
页面布局分析：
按钮在文本框里面，所以文本框是父元素，按钮是子元素。要使得按钮在文本框的右上角，需要使用绝对定位。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #copy-text {
            background-color: black;
            width: 500px;
            height: 500px;
            color: white;
            position: relative;
        }
        
        #copy-btn {
            position: absolute;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="copy-text">
        <button id="copy-btn">复制</button>
        <div id="code">示例代码</div>
    </div>
    <script src="jquery-3.6.4.min.js"></script>
    <script>
        var copyBtn = $('#copy-btn');
        $('#copy-text').mouseenter(function() {
            //显示复制按钮
            copyBtn.show();

        });
        $('#copy-text').mouseleave(function() {
            //隐藏复制按钮
            copyBtn.hide();
        });

        const copyBtn2 = document.getElementById('copy-btn');
        const copyText = document.getElementById("copy-text");
        const code = document.getElementById("code");

        copyBtn2.addEventListener('click', function() {
            navigator.clipboard.writeText(code.innerText)
                .then(() => {
                    console.log("文本已复制到剪贴板");
                })
                .catch((err) => {
                    console.error("无法复制文本：", err);
                });
        });
    </script>
</body>

</html>