หน้านี้ได้รับการแปลโดย Cloud Translation API

ทดสอบเหตุการณ์ clipboardchange ซึ่งเป็นวิธีที่มีประสิทธิภาพมากขึ้นในการตรวจสอบคลิปบอร์ด

Rohan Raja

Patrick Brosset

เผยแพร่: 23 กันยายน 2025

clipboardchange เป็นฟีเจอร์ใหม่ที่ทีม Microsoft Edge เพิ่มลงใน Chrome ซึ่งช่วยให้คุณตรวจสอบการเปลี่ยนแปลงคลิปบอร์ดได้อย่างมีประสิทธิภาพโดยไม่ต้องมี ค่าใช้จ่ายด้านประสิทธิภาพของการสำรวจ

ตอนนี้คุณทดสอบเหตุการณ์ clipboardchange ได้แล้วด้วยช่วงทดลองใช้จากต้นทางทั้งใน Chrome และ Edge โดยเริ่มตั้งแต่เวอร์ชัน 140 เรายินดีรับฟังความคิดเห็นที่คุณอาจมีขณะทดสอบฟีเจอร์ใหม่นี้ เนื่องจากเราหวังที่จะทำให้ฟีเจอร์นี้เป็นมาตรฐานในท้ายที่สุด

ความท้าทายในการสำรวจคลิปบอร์ดเพื่อตรวจหาการเปลี่ยนแปลง

หากต้องการทราบว่ามีเนื้อหาใดอยู่ในคลิปบอร์ดของระบบ คุณต้องใช้วิธีการสำรวจที่ไม่มีประสิทธิภาพ ตัวอย่างเช่น เว็บแอปแก้ไขข้อความอาจต้องการ เปิดใช้ปุ่ม "วาง" ที่แตกต่างกันโดยพิจารณาว่าคลิปบอร์ดมีข้อความ รูปภาพ หรือเนื้อหา HTML หรือไม่

แนวทางปัจจุบันในการดำเนินการนี้กำหนดให้คุณต้องเรียกใช้เมธอด navigator.clipboard.read() ซ้ำๆ เพื่อตรวจสอบเนื้อหาในคลิปบอร์ด ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

// Inefficient polling approach
setInterval(async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    updatePasteButtons(clipboardItems);
  } catch (err) {
    console.error('Failed to read clipboard:', err);
  }
}, 1000); // Poll every second

แม้ว่าวิธีนี้จะใช้ได้ แต่ก็มีข้อเสียที่สำคัญเช่นกัน

ผลกระทบต่อประสิทธิภาพ

การสำรวจคลิปบอร์ดอย่างต่อเนื่องจะสร้างโอเวอร์เฮดที่ไม่จำเป็น การเรียกใช้ navigator.clipboard.read() แต่ละครั้งต้องมีการเข้าถึงคลิปบอร์ดระดับระบบ ซึ่งอาจ ส่งผลเสียต่อประสิทธิภาพของแอปพลิเคชัน โดยเฉพาะในอุปกรณ์ที่มี ทรัพยากรจำกัด ความถี่ในการสำรวจจะกลายเป็นข้อแลกเปลี่ยนระหว่าง การตอบสนองกับประสิทธิภาพ

แบตเตอรี่หมดเร็ว

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

ความไม่สอดคล้องกันของประสบการณ์ของผู้ใช้

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

ข้อกังวลด้านความเป็นส่วนตัวเกี่ยวกับการสำรวจความคิดเห็นมากเกินไป

การเข้าถึงคลิปบอร์ดบ่อยๆ อาจทำให้เกิดความกังวลเรื่องความเป็นส่วนตัว เนื่องจากแอปพลิเคชันจะอ่านข้อมูลในคลิปบอร์ดอย่างต่อเนื่องแม้ว่าจะไม่มีการเปลี่ยนแปลงก็ตาม ซึ่งอาจสร้างความรำคาญให้แก่ผู้ใช้ที่คำนึงถึงความเป็นส่วนตัวเกี่ยวกับเนื้อหาในคลิปบอร์ด

การแข่งขัน `clipboardchange`

เพื่อรับมือกับความท้าทายเหล่านี้ เราได้ใช้เหตุการณ์ใหม่ที่ชื่อว่า clipboardchange และกำลังเปิดตัวช่วงทดลองใช้จากต้นทางทั้งใน Edge และ Chrome เพื่อให้คุณทดสอบในแอปได้

เหตุการณ์นี้ช่วยให้เว็บแอปพลิเคชันตอบสนองต่อการเปลี่ยนแปลงคลิปบอร์ดได้โดยอัตโนมัติ แทนที่จะต้องสำรวจการเปลี่ยนแปลงเหล่านั้นอย่างต่อเนื่อง โดยจะทริกเกอร์โดยอัตโนมัติเมื่อมีการคัดลอก หรือตัดเนื้อหาไปยังคลิปบอร์ดจากแอปพลิเคชันใดก็ตาม ระบบจะล้างคลิปบอร์ด หรือ มีการวางเนื้อหา (ซึ่งอาจล้างคลิปบอร์ดในบางกรณี) เหตุการณ์จะทริกเกอร์เมื่อเอกสารมีโฟกัสเท่านั้น

คุณฟังเหตุการณ์ clipboardchange ได้โดยเพิ่ม Listener ในอินเทอร์เฟซ navigator.clipboard ดังที่แสดงที่นี่

navigator.clipboard.addEventListener('clipboardchange', event => {
  console.log('Clipboard content changed!');
  console.log('Available MIME types:', event.types);

  // Update UI based on available formats
  updatePasteButtons(event.types);
});

ข้อดีหลัก

clipboardchange เหตุการณ์มีประโยชน์หลายประการมากกว่าการสำรวจ ดังนี้

มีประสิทธิภาพ: ระบบจะทริกเกอร์เหตุการณ์เมื่อมีการเปลี่ยนแปลงเกิดขึ้นจริงเท่านั้น
รักษาความเป็นส่วนตัว: เหตุการณ์จะแสดงเฉพาะMIME type ดั้งเดิม ไม่ใช่เนื้อหาจริง
ไม่มีข้อความแจ้งขอสิทธิ์: เนื่องจากไม่มีการเปิดเผยข้อมูลที่ละเอียดอ่อน จึงไม่จำเป็นต้องมีสิทธิ์จากผู้ใช้
การตอบสนองแบบเรียลไทม์: UI จะอัปเดตทันทีเมื่อเนื้อหาในคลิปบอร์ดเปลี่ยนแปลง
รับรู้โฟกัส: เหตุการณ์จะทริกเกอร์เมื่อเอกสารมีโฟกัสเท่านั้น

พร็อพเพอร์ตี้ `types`

ออบเจ็กต์เหตุการณ์ clipboardchange มีพร็อพเพอร์ตี้ types ซึ่งมี อาร์เรย์ของประเภท MIME ที่พร้อมใช้งานในคลิปบอร์ด

navigator.clipboard.addEventListener('clipboardchange', event => {
  // Example types array: ['text/plain', 'text/html', 'image/png']
  const hasText = event.types.includes('text/plain');
  const hasImage = event.types.includes('image/png');
  const hasHtml = event.types.includes('text/html');

  // Enable/disable paste buttons accordingly
  document.getElementById('paste-text').disabled = !hasText;
  document.getElementById('paste-image').disabled = !hasImage;
  document.getElementById('paste-html').disabled = !hasHtml;
});

ลักษณะการทำงานของโฟกัส

หากมีการเปลี่ยนแปลงคลิปบอร์ดขณะที่เอกสารไม่ได้อยู่ในโฟกัส ระบบจะทริกเกอร์เหตุการณ์ clipboardchange รายการเดียวเมื่อเอกสารกลับมาอยู่ในโฟกัสของระบบ ระบบจะไม่แสดงข้อมูลการเปลี่ยนแปลงคลิปบอร์ดในอดีต แต่จะแสดงเฉพาะประเภทที่ใช้ได้เมื่อหน้าเว็บได้รับโฟกัสในtypes สมาชิก

ทดสอบ`clipboardchange`วันนี้

คุณทดสอบclipboardchangeเหตุการณ์ใหม่ได้แล้ววันนี้

ไม่ว่าจะในเครื่องโดยการเปิดใช้ฟีเจอร์ในเบราว์เซอร์เท่านั้น
หรือในเว็บแอปพลิเคชันเวอร์ชันที่ใช้งานจริงโดยลงทะเบียนช่วงทดลองใช้จากต้นทาง

ตรวจหา`clipboardchange` เหตุการณ์เพื่อความเข้ากันได้ที่ดียิ่งขึ้น

ก่อนอื่น เนื่องจากเป็นฟีเจอร์ใหม่ คุณจึงต้องตรวจหาการรองรับก่อน ใช้งาน คุณทำได้โดยทดสอบว่ามีพร็อพเพอร์ตี้ onclipboardchange ใน navigator.clipboard หรือไม่ ดังที่แสดงที่นี่

if ('onclipboardchange' in navigator.clipboard) {
  // The clipboardchange event is supported
  navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
  // Fallback to polling or other methods
  console.log('clipboardchange event not supported, using fallback');
  setInterval(checkClipboard, 2000);
}

ทดสอบในเครื่อง

หากต้องการทดสอบเหตุการณ์ clipboardchange ในเบราว์เซอร์เท่านั้น ให้ทำดังนี้

เปิดหน้า about://flags
ค้นหา ClipboardChangeEvent ในช่องค้นหาฟีเจอร์ที่ทดลองใช้
ใช้เมนูแบบเลื่อนลงและเปลี่ยนค่าจากค่าเริ่มต้นเป็นเปิดใช้
รีสตาร์ทเบราว์เซอร์

ลงชื่อสมัครเข้าร่วมการทดลองใช้จากต้นทาง

หากต้องการลองใช้เหตุการณ์ clipboardchange ในเว็บไซต์กับผู้ใช้จริง ให้ลงชื่อสมัครใช้ การทดลองใช้ต้นทางใน Chrome หรือ Edge ช่วงทดลองใช้จากต้นทางจะทำงานใน Chrome และ Edge ระหว่างเวอร์ชัน 140 ถึง 142 (ระหว่างวันที่ 2 กันยายน 2025 ถึงวันที่ 2 ธันวาคม 2025)

อ่านเริ่มต้นใช้งาน Origin Trials เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ Origin Trials และวิธีเริ่มต้นใช้งาน

สาธิต

หากต้องการดูเหตุการณ์ขณะที่เกิดขึ้น ให้สำรวจการสาธิตและดูซอร์สโค้ดใน GitHub

การสาธิตนี้แสดงวิธีใช้เหตุการณ์ clipboardchange เพื่อสร้างอินเทอร์เฟซการวางที่ตอบสนองซึ่งอัปเดตโดยอัตโนมัติตามเนื้อหาในคลิปบอร์ด

ลองคัดลอกเนื้อหาประเภทต่างๆ (ข้อความ รูปภาพ HTML) แล้วดูว่าปุ่มวางจะเปิดและปิดใช้แบบเรียลไทม์ได้อย่างไรโดยไม่ต้องทำการสำรวจ

ความคิดเห็น

เราอยากทราบความคิดเห็นของคุณเกี่ยวกับวิธีที่clipboardchange event ทำงานสำหรับกรณีการใช้งานของคุณ โปรดแสดงความคิดเห็นโดยสร้างปัญหาที่ ที่เก็บ W3C/clipboard-apis
สัญญาณสาธารณะเกี่ยวกับความสนใจของคุณจะช่วยให้เราและเบราว์เซอร์อื่นๆ เข้าใจ ความสำคัญของฟีเจอร์นี้สำหรับคุณ ซึ่งจะช่วยแจ้งกระบวนการ กำหนดมาตรฐาน

แม้ว่าเหตุการณ์นี้จะใช้เป็นการเพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไปได้ แต่เราต้องการ กำหนดมาตรฐานให้เป็นส่วนหนึ่งของข้อกำหนด Clipboard API และในที่สุดก็ต้องการให้ เบราว์เซอร์ทั้งหมดนำไปใช้ ในตอนนี้ คุณสามารถกลับไปใช้การสำรวจหรือเทคนิคการตรวจสอบคลิปบอร์ดอื่นๆ ได้