Làm cách nào để thêm nút copy cho đoạn văn bản

Giới thiệu:

Bài viết này sẽ hướng dẫn các bạn cách làm sao để thêm nút copy nhanh cho đoạn văn bản. Xem demo bên dưới để rõ hơn

Hướng Dẫn

Sử dụng HTML bên dưới để thêm vào bài viết

<input type="text" value="Huy DC - www.huydc.net" id="myInput" readonly="readonly">
<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy</span>
  Copy text
  </button>
</div>

Có thể bỏ readonly="readonly đi nếu muốn khách sửa được đoạn văn bản
Sửa đoạn màu đỏ cho phù hợp với nội dung của bạn

Sử dụng JavaScript

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Đã Copy";
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy đến clipboard";
}
</script>

Có thể sửa những nội dung màu đỏ cho phù hợp với website của bạn

Và thêm đoạn CSS bên dưới

<style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>