📋 Notificação Toast de Cópia Bem-sucedida

Este modelo exibe uma notificação "toast" no canto inferior direito quando a cópia é realizada com sucesso.

📋 Demonstração da função de copiar

✅ Copiado!

Código totalmente funcional de cópia + notificação

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Função de copiar com notificação tipo toast</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      text-align: center;
    }

    #toast {
      visibility: hidden;
      min-width: 200px;
      margin: 0 auto;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      padding: 10px;
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s, visibility 0.5s;
    }

    #toast.show {
      visibility: visible;
      opacity: 1;
    }

    button {
      padding: 10px 20px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h2>📋 Demonstração da função de copiar</h2>
  <button onclick="copyText()">📋 Testar cópia</button>
  <div id="toast">✅ Copiado!</div>

  <script>
    function copyText() {
      const text = "Este é o texto a ser copiado";
      navigator.clipboard.writeText(text).then(() => {
        const toast = document.getElementById("toast");
        toast.classList.add("show");
        setTimeout(() => {
          toast.classList.remove("show");
        }, 2000);
      }).catch(err => {
        alert("Falha ao copiar: " + err);
      });
    }
  </script>

</body>
</html>

✅ Usos e Benefícios deste Modelo

  • Informa visualmente ao usuário que a cópia foi bem-sucedida
  • Melhora a experiência do usuário com uma operação intuitiva
  • Facilita a compreensão da ação de cópia bem-sucedida
  • A exibição/remoção da notificação é controlada automaticamente
  • Pode ser adaptado a diversas interfaces com botão de cópia

🧩 Dicas de Personalização e Uso do Toast

Este modelo implementa uma notificação visual do tipo toast que aparece suavemente no canto inferior direito após uma cópia bem-sucedida. É uma forma simples mas eficaz de melhorar a experiência do usuário.

Utilizando navigator.clipboard.writeText(...), copiamos o texto para a área de transferência e, com classList.add("show"), exibimos o toast. A notificação desaparece automaticamente graças ao setTimeout(...).

Este tipo de toast pode ser usado não apenas para cópia, mas também para envio de formulários, exibição de erros, confirmações de salvamento e muito mais. Alterando o conteúdo via innerText, é possível adaptá-lo para diversas situações.

🔧 Pontos para Personalização

A posição de exibição pode ser modificada via CSS (right: 30px; bottom: 30px;). O tempo de exibição pode ser ajustado mudando o valor em setTimeout(..., 2000).

A animação visual é feita com @keyframes fadein e fadeout, inteiramente em CSS, garantindo leveza e suavidade. A combinação de CSS e JavaScript proporciona funcionalidade com mínimo de código.