Cách sao chép văn bản vào bảng nháp

Sao chép văn bản vào bảng nháp

Bước 1 - Thêm HTML:

Dữ liệu văn bản
<input type="text" value="Hello World" id="myInput">
<!-- Nút để sao chép văn bản -->
<button onclick="myFunction()">Sao chép văn bản</button>

Bước 2 - Thêm JavaScript:

function myFunction() {
  // Lấy trường văn bản
  var copyText = document.getElementById("myInput");
  // Chọn trường văn bản
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Đối với thiết bị di động
   // Sao chép văn bản trong trường văn bản
  navigator.clipboard.writeText(copyText.value);
  // Thông báo văn bản đã sao chép
  alert("Đã sao chép văn bản: " + copyText.value);
{}

Thử ngay

Hiển thị văn bản đã sao chép trong công cụ chỉ dẫn

Thêm CSS:

.tooltip {
  vị trí: tương đối;
  hiển thị:-inline-block;
{}
.tooltip .tooltiptext {
  kinh thị: ẩn;
  độ rộng: 140px;
  màu nền: #555;
  màu văn bản: #fff;
  canh văn bản: giữa;
  đường viền bo tròn: 6px;
  độ dày biên: 5px;
  vị trí: tuyệt đối;
  thứ tự lớp: 1;
  dưới: 150%;
  trái: 50%;
  canh trái: -75px;
  độ mờ: 0;
  transition: độ mờ 0.3s;
{}
.tooltip .tooltiptext::after {
  nội dung: "";
  vị trí: tuyệt đối;
  trên: 100%;
  trái: 50%;
  canh trái: -5px;
  độ rộng viền: 5px;
  kiểu viền: đậm;
  màu viền: #555 trong suốt trong suốt trong suốt;
{}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
{}

Thử ngay