Giới thiệu về chức năng Copy to Clipboard
Khi bạn truy cập một trang web đầy thông tin hữu ích hoặc một bài viết chứa mã nguồn quan trọng, bạn thường muốn chia sẻ nội dung này với người khác. Điều này thường gặp khó khăn khi người dùng phải tự sao chép và dán nội dung. Chính vì vậy, chúng ta sẽ hướng dẫn cách tạo chức năng “Copy to Clipboard” để giúp người dùng có thể sao chép nội dung một cách dễ dàng chỉ với một cú nhấp chuột.
Các bước để tạo Copy to Clipboard
Chuẩn bị môi trường
Trước khi bắt đầu, hãy đảm bảo rằng bạn đã tích hợp thư viện Font Awesome vào trang web của mình. Thư viện này cung cấp biểu tượng cho nút “Copy” của chúng ta.
Thêm Mã HTML và CSS
Bằng cách thêm mã HTML và CSS, chúng ta tạo một khung nội dung có chứa nút “Copy” và nội dung cần sao chép. Điều này giúp người dùng có thể thực hiện thao tác sao chép chỉ với một cú nhấp chuột.
<div class="copy-container">
<button class="copy-button">Copy</button>
<div class="content-to-copy">
<!-- Nội dung bạn muốn sao chép ở đây -->
</div>
</div>
Thêm CSS
.copy-container {
position: relative;
display: inline-block;
}
.copy-button {
background-color: #3498db;
color: #ffffff;
border: none;
padding: 8px 16px;
cursor: pointer;
}
.content-to-copy {
margin-top: 10px;
border: 1px solid #ccc;
padding: 10px;
font-family: Arial, sans-serif;
}
Thêm Javascript
document.addEventListener('DOMContentLoaded', function() {
const copyButton = document.querySelector('.copy-button');
const contentToCopy = document.querySelector('.content-to-copy');
copyButton.addEventListener('click', function() {
const textToCopy = contentToCopy.innerText;
const tempInput = document.createElement('textarea');
tempInput.value = textToCopy;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
copyButton.innerText = 'Copied!';
setTimeout(function() {
copyButton.innerText = 'Copy';
}, 2000);
});
});
Demo bên dưới
Cách tạo Copy to Clipboard kết hợp Font Awesome
Thêm biểu tượng từ Font Awesome
Đầu tiên, bạn cần bao gồm thư viện Font Awesome trong trang web của mình. Bạn có thể thêm dòng sau vào phần <head> của trang hoặc bài viết WordPress:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Xem thêm: Cách tạo mã Coupon cho website wordpress
Cập nhật lại file HTML, CSS và Script giống demo bên dưới
See the Pen
Copy to Clipboard by An Tran Digital (@antrandigital)
on CodePen.
Kết luận
Thực hiện chỉ một vài bước đơn giản, bạn đã tạo thành công chức năng “Copy to Clipboard” cho trang web của mình. Bằng cách tạo sự thuận tiện cho người dùng, bạn không chỉ cải thiện trải nghiệm trang web mà còn thể hiện sự chăm chỉ và quan tâm đến người dùng của mình.
Tích hợp chức năng “Copy to Clipboard” là một cách tốt để tạo tương tác trang web và tạo giá trị thêm cho người dùng. Bắt đầu thử nghiệm và cải thiện trang web của bạn ngay hôm nay!
