📋 การแจ้งเตือน Toast เมื่อคัดลอกสำเร็จ

เทมเพลตนี้จะแสดงการแจ้งเตือนแบบ "toast" ที่มุมล่างขวาเมื่อคัดลอกข้อความสำเร็จ

📋 ตัวอย่างการทำงานของปุ่มคัดลอก

✅ คัดลอกแล้ว!

โค้ดคัดลอกพร้อม Toast ที่ทำงานได้สมบูรณ์

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ฟังก์ชันคัดลอกพร้อมการแจ้งเตือนแบบ 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>📋 ตัวอย่างการทำงานของปุ่มคัดลอก</h2>
  <button onclick="copyText()">📋 ลองกดคัดลอก</button>
  <div id="toast">✅ คัดลอกแล้ว!</div>

  <script>
    function copyText() {
      const text = "นี่คือข้อความที่จะคัดลอก";
      navigator.clipboard.writeText(text).then(() => {
        const toast = document.getElementById("toast");
        toast.classList.add("show");
        setTimeout(() => {
          toast.classList.remove("show");
        }, 2000);
      }).catch(err => {
        alert("ไม่สามารถคัดลอกได้: " + err);
      });
    }
  </script>

</body>
</html>

✅ ประโยชน์และการใช้งานของเทมเพลตนี้

  • แสดงผลให้ผู้ใช้เห็นชัดว่าคัดลอกสำเร็จแล้ว
  • เพิ่มประสบการณ์ผู้ใช้งาน (UX) ให้ใช้งานได้ง่ายและเข้าใจทันที
  • ทำให้เข้าใจว่าเกิดการคัดลอกสำเร็จ
  • ควบคุมการแสดง/ซ่อนการแจ้งเตือนโดยอัตโนมัติ
  • สามารถประยุกต์ใช้กับ UI ที่มีปุ่มคัดลอกในสถานการณ์ต่าง ๆ ได้

🧩 การประยุกต์ใช้และการปรับแต่ง Toast

เทมเพลตนี้ออกแบบมาเพื่อแจ้งให้ผู้ใช้ทราบว่าการคัดลอกเสร็จสมบูรณ์ โดยแสดงผลลอยขึ้นที่มุมขวาล่างของหน้าจอ เพิ่ม UX ได้อย่างมาก

โดยใช้ navigator.clipboard.writeText(...) เพื่อนำข้อความไปยังคลิปบอร์ด และ classList.add("show") เพื่อแสดงการแจ้งเตือนแบบ toast ซึ่งจะหายไปอัตโนมัติภายใน setTimeout(...)

สามารถนำ toast แบบนี้ไปใช้ในกรณีอื่น เช่น การส่งแบบฟอร์ม, ข้อผิดพลาด, หรือการบันทึกข้อมูล เป็นต้น และปรับข้อความโดยใช้ innerText ให้ยืดหยุ่นได้ตามต้องการ

🔧 เคล็ดลับการปรับแต่ง

ตำแหน่งของ toast ถูกกำหนดที่ right: 30px; bottom: 30px; แต่สามารถเปลี่ยนตำแหน่งได้ตาม CSS

เวลาที่แสดงสามารถปรับได้ใน setTimeout(..., 2000)

แอนิเมชันใช้ @keyframes fadein และ fadeout จึงไม่ต้องใช้ JavaScript มาก ทำให้เบาและลื่นไหล