Hướng dẫn tạo nút Copy to Clipboard bằng HTML, CSS và JavaScript

Cấu trúc HTML của nút Copy to Clipboard

Đầu tiên, cần chuẩn bị cấu trúc HTML cơ bản gồm một khối hiển thị nội dung cần sao chép và một nút bấm để kích hoạt thao tác copy.

<div class="copy-box">
    <pre id="copy-target">console.log("Hello from Copy to Clipboard!");</pre>
    <button id="copy-button" type="button">Copy</button>
    <p id="copy-message"></p>
</div>

Trong ví dụ trên, thẻ pre giữ nội dung cần sao chép, nút button dùng để kích hoạt việc sao chép và thẻ p hiển thị trạng thái sau khi người dùng nhấn nút.

CSS cơ bản cho khối code và nút Copy

Tiếp theo là phần CSS đơn giản để khối code dễ đọc hơn và nút Copy nổi bật hơn. Phần mã dưới đây chỉ mang tính minh họa, có thể điều chỉnh tùy theo giao diện trang.

.copy-box {
    max-width: 640px;
    margin: 16px 0;
}

.copy-box pre {
    background: #1e1e1e;
    color: #f8f8f2;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 13px;
    overflow-x: auto;
    line-height: 1.5;
}

.copy-box button {
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
}

.copy-box p {
    margin-top: 6px;
    font-size: 13px;
}

Mục tiêu của phần CSS này là giúp đoạn code dễ nhìn và tạo khoảng cách hợp lý giữa nội dung, nút bấm và thông báo trạng thái.

Viết JavaScript để sao chép nội dung

Phần quan trọng nhất của nút Copy to Clipboard nằm ở JavaScript. Đoạn mã sau đây sẽ đọc nội dung trong thẻ pre và sao chép vào clipboard khi người dùng nhấn nút.

(function() {
    var button = document.getElementById("copy-button");
    var target = document.getElementById("copy-target");
    var message = document.getElementById("copy-message");

    function showMessage(text, isSuccess) {
        message.textContent = text;
        message.style.color = isSuccess ? "#16a34a" : "#dc2626";
    }

    function copyText(text) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(text);
        }

        return new Promise(function(resolve, reject) {
            var textarea = document.createElement("textarea");
            textarea.value = text;
            textarea.style.position = "fixed";
            textarea.style.opacity = "0";
            document.body.appendChild(textarea);
            textarea.select();
            try {
                var ok = document.execCommand("copy");
                document.body.removeChild(textarea);
                ok ? resolve() : reject();
            } catch (err) {
                document.body.removeChild(textarea);
                reject(err);
            }
        });
    }

    button.addEventListener("click", function() {
        var text = target.innerText || target.textContent || "";
        if (!text.trim()) {
            showMessage("Không có nội dung để sao chép.", false);
            return;
        }

        copyText(text)
            .then(function() {
                showMessage("Đã sao chép vào clipboard.", true);
            })
            .catch(function() {
                showMessage("Sao chép thất bại. Vui lòng thử lại.", false);
            });
    });
})();

Đoạn mã trên ưu tiên sử dụng navigator.clipboard.writeText() nếu trình duyệt hỗ trợ, và tự động chuyển sang phương pháp dự phòng bằng document.execCommand("copy") trong các trường hợp còn lại.

Kết hợp HTML, CSS và JavaScript

Khi kết hợp ba phần HTML, CSS và JavaScript, nút Copy to Clipboard sẽ sẵn sàng hoạt động trong bất kỳ trang web nào. Cấu trúc cơ bản gồm một khối code, một nút Copy và đoạn script xử lý logic sao chép và hiển thị thông báo.

Phần dưới đây là một demo hoạt động trực tiếp. Người đọc có thể nhấp vào nút Copy để kiểm tra cách tính năng này vận hành trong thực tế.

console.log("Hello from Copy Button!");

Một số lưu ý khi sử dụng nút Copy to Clipboard

• Nên đặt nội dung cần sao chép trong thẻ pre hoặc code để giữ nguyên định dạng.
• Cần đảm bảo nút Copy và khối chứa nội dung có id rõ ràng, tránh trùng lặp trong trang.
• Nên hiển thị thông báo sau khi sao chép để người dùng biết thao tác đã thành công hoặc thất bại.
• Nên kiểm tra tính năng trên các trình duyệt khác nhau để đảm bảo khả năng tương thích.

Kết luận

Nút Copy to Clipboard là một thành phần nhỏ nhưng rất hữu ích trong các bài viết kỹ thuật, đặc biệt là những bài có nhiều đoạn code mẫu.

Với HTML để tạo cấu trúc, CSS để định dạng và JavaScript để xử lý thao tác sao chép, tính năng này có thể được triển khai nhanh chóng và dễ dàng.

Việc bổ sung nút Copy to Clipboard giúp nội dung rõ ràng hơn, nâng cao trải nghiệm người đọc và giảm thiểu sai sót trong quá trình sao chép.