Code Nút Copy đoạn Text Vào Clipboard Cho Website Wordpress

Để tạo nút copy đoạn text vào clipboard cho một website WordPress, bạn có thể sử dụng JavaScript kết hợp với HTML và CSS. Dưới đây là hướng dẫn chi tiết:

Code nút copy đoạn text vào clipboard cho website wordpress

HTML nút copy đoạn text vào clipboard

Thêm một nút và khu vực chứa nội dung mà bạn muốn sao chép:

<div class="copy-container">
  <p id="copyText">Đây là đoạn văn bản sẽ được sao chép vào clipboard khi nhấn nút.</p>
  <button id="copyButton">Sao chép</button>
</div>

<p id="copyText">Đây là đoạn văn bản sẽ được sao chép vào clipboard khi nhấn nút.</p>

</div>

JavaScript nút copy đoạn text vào clipboard

Thêm đoạn script để xử lý sự kiện sao chép nội dung vào clipboard:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const copyButton = document.getElementById("copyButton");
  const copyText = document.getElementById("copyText").innerText;

  copyButton.addEventListener("click", () => {
    navigator.clipboard.writeText(copyText)
      .then(() => {
        alert("Đã sao chép vào clipboard!");
      })
      .catch(err => {
        console.error("Sao chép không thành công:", err);
        alert("Sao chép không thành công. Vui lòng thử lại.");
      });
  });
});
</script>

document.addEventListener("DOMContentLoaded", function () {

const copyButton = document.getElementById("copyButton");

const copyText = document.getElementById("copyText").innerText;

copyButton.addEventListener("click", () => {

navigator.clipboard.writeText(copyText)

.then(() => {

alert("Đã sao chép vào clipboard!");

})

.catch(err => {

console.error("Sao chép không thành công:", err);

alert("Sao chép không thành công. Vui lòng thử lại.");

});

</script>

CSS (Tùy chọn)

Bạn có thể tùy chỉnh giao diện nút bằng CSS:

.copy-container {
  display: flex;
  align-items: center;
}

#copyButton {
  margin-left: 10px;
  padding: 5px 15px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#copyButton:hover {
  background-color: #218838;
}

.copy-container {

display: flex;

align-items: center;

}

#copyButton {

margin-left: 10px;

padding: 5px 15px;

background-color: #28a745;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

}

#copyButton:hover {

background-color: #218838;

}

Cách hoạt động:

Mỗi thẻ có class copyText sẽ được JavaScript thu thập.

Nội dung của các thẻ được nối lại với nhau, mỗi nội dung nằm trên một dòng.

Xem thêm bài viết khác

Khi nhấn nút “Sao chép tất cả nội dung”, toàn bộ nội dung được sao chép vào clipboard.

Áp dụng:

Bạn có thể thêm đoạn mã này vào website WordPress thông qua:

Custom HTML/JS trong widget hoặc khối HTML tùy chỉnh.

Plugin như Code Snippets nếu muốn sử dụng lâu dài.

Theo dỗi tên trên Fanpage và Youtube của mình nhé.