Como copiar texto para a área de transferência

Copie o texto para a área de transferência

Primeiro passo - Adicionar HTML:

<!-- Text field -->
<input type="text" value="Hello World" id="myInput">
<!-- Botão usado para copiar texto -->
<button onclick="myFunction()">Copiar texto</button>

Segundo passo - Adicionar JavaScript：

function myFunction() {
  // Obter o campo de texto
  var copyText = document.getElementById("myInput");
  // Selecionar o campo de texto
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Para dispositivos móveis
   // Copiar o texto dentro do campo
  navigator.clipboard.writeText(copyText.value);
  // Avisar sobre o texto copiado
  alert("Texto copiado: " + copyText.value);
}

Experimente você mesmo

Exibir o texto copiado na dica de ferramenta

Adicionar CSS：

.tooltip {
  posição: relativa;
  exibição: bloco-inline;
}
.tooltip .tooltiptext {
  visibilidade: oculta;
  largura: 140px;
  cor-de-fundo: #555;
  cor: #fff;
  alinhamento-de-texto: centro;
  raio-aresta: 6px;
  margem: 5px;
  posição: absoluta;
  z-index: 1;
  inferior: 150%;
  esquerda: 50%;
  margem-esquerda: -75px;
  opacidade: 0;
  transição: opacidade 0.3s;
}
.tooltip .tooltiptext::after {
  conteúdo: "";
  posição: absoluta;
  topo: 100%;
  esquerda: 50%;
  margem-esquerda: -5px;
  largura-de-borda: 5px;
  estilo-de-borda: sólido;
  cor-de-borda: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Experimente você mesmo