Browser APIs

Clipboard API คืออะไร

Clipboard API คือ browser API ที่ให้ JavaScript อ่านและเขียน clipboard ของผู้ใช้ได้ผ่าน `navigator.clipboard` ใช้กรณีเช่น: - ปุ่ม "คัดลอก" ใน code snippet - ปุ่ม copy link - อ่าน clipboard เมื่อผู้ใช้กด paste

writeText — copy ข้อความไปยัง clipboard

`navigator.clipboard.writeText(text)` รับ string แล้วเขียนลง clipboard — คืน Promise ที่ resolve เมื่อสำเร็จ ต้องเรียกในบริบทที่มี user gesture (เช่น ใน event handler ของ click) — ถ้าเรียกตอน load หน้าจะถูกบล็อก

const btn = document.querySelector("#copy-btn");

btn.addEventListener("click", async function() {
  try {
    await navigator.clipboard.writeText("สวัสดีโลก");
    console.log("คัดลอกแล้ว!");
    btn.textContent = "คัดลอกแล้ว ✓";
  } catch (error) {
    console.error("คัดลอกไม่สำเร็จ:", error);
  }
});

readText — อ่านข้อความจาก clipboard

`navigator.clipboard.readText()` อ่านข้อความจาก clipboard — คืน Promise ที่ resolve เป็น string เบราว์เซอร์จะ **ขอ permission** จากผู้ใช้ก่อน (`clipboard-read`) — ถ้าปฏิเสธจะ throw error

document.querySelector("#paste-btn").addEventListener("click", async function() {
  try {
    const text = await navigator.clipboard.readText();
    document.querySelector("#output").textContent = text;
    console.log("อ่าน clipboard ได้:", text);
  } catch (error) {
    console.error("อ่าน clipboard ไม่สำเร็จ:", error);
    // อาจเป็นเพราะผู้ใช้ปฏิเสธ permission
  }
});

ข้อควรระวัง

• **ต้องใช้บน HTTPS** — Clipboard API ใช้ไม่ได้บน `http://` (ยกเว้น `localhost`) — ถ้า deploy บน production ต้องเป็น HTTPS
• **ต้องมี user gesture** — `writeText` และ `readText` ต้องเรียกใน event handler จาก action ของผู้ใช้ (click, keypress) — ไม่สามารถเรียกตอนโหลดหน้าได้
• **readText ต้องขอ permission** — เบราว์เซอร์จะแสดง dialog ขอ permission ก่อนอ่าน clipboard — ถ้าผู้ใช้ปฏิเสธต้องจัดการใน catch
• **Safari รองรับบางส่วน** — writeText ทำงานได้ดี แต่ readText อาจมีข้อจำกัดใน Safari รุ่นเก่า

Lab 1: คัดลอกข้อความด้วย writeText

Lab 2: อ่านข้อความจาก clipboard ด้วย readText