เผยแพร่เมื่อวันที่ 30 เมษายน 2025
ฉลอง: ฟีเจอร์บนเว็บนี้พร้อมใช้งานในเครื่องมือเบราว์เซอร์หลักทั้ง 3 รายการแล้ว และจะกลายเป็นฟีเจอร์ใหม่ใน Baseline ตั้งแต่วันที่ 30 มีนาคม 2025
Async Clipboard API ทําให้การใช้คลิปบอร์ดง่ายขึ้นมากเมื่อเทียบกับในอดีต ตอนนี้คุณสามารถเรียกใช้ navigator.clipboard.writeText() สำหรับเนื้อหาข้อความธรรมดา หรือ navigator.clipboard.write() สำหรับ "เกือบ" ทุกอย่างอื่นๆ เช่น รูปภาพ เนื้อหาที่เป็นข้อความ หรือ HTML แทนวิธีการจัดการคลิปบอร์ดแบบเดิม
แต่สิ่งที่ยังขาดหายไปคือการกำหนดปริมาณของ "เกือบ" ตัวอย่างเช่น คุณไม่สามารถทราบว่า API รองรับ SVG หรือไม่จนกว่าจะลองใช้ และในกรณีที่ไม่รองรับ ก็จะจับข้อยกเว้นที่แสดง วิธีนี้ไม่เหมาะกับการใช้งานจริงในการระบุการรองรับ เราจึงระบุฟังก์ชัน ClipboardItem.supports() แบบคงที่
ตอนนี้ฟังก์ชันนี้อยู่ในสถานะ "พร้อมใช้งานใหม่" ของเกณฑ์พื้นฐาน ซึ่งหมายความว่าการทำงานกับคลิปบอร์ดจะดีขึ้นไปอีก หากต้องการทราบว่าเบราว์เซอร์รองรับรูปแบบใด ให้ส่งประเภท MIME ของรูปแบบที่ต้องการไปยังฟังก์ชัน
const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."
ก่อนหน้านี้ เราเขียนทุกอย่าง "เกือบ" หมดแล้ว และนี่เป็นสิ่งที่น่าสนใจมาก รูปแบบที่กำหนดเองของเว็บช่วยให้คุณทำงานกับรูปแบบที่เบราว์เซอร์ไม่รองรับโดยค่าเริ่มต้นได้ เช่น โดยค่าเริ่มต้น เบราว์เซอร์ไม่รองรับรูปภาพ AVIF
const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."
แต่การใช้รูปแบบที่กำหนดเองของเว็บจะช่วยให้คุณทำงานกับรูปภาพ AVIF และคัดลอกและวางรูปภาพได้อย่างอิสระ ตราบใดที่ฝ่ายที่รับทราบวิธีจัดการกับรูปแบบที่กำหนดเองของเว็บด้วย
const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."
ฟังก์ชัน ClipboardItem.supports() ช่วยให้คุณตรวจหาสถานการณ์การรองรับคลิปบอร์ดสำหรับรูปแบบที่กำหนดเองของเว็บได้อย่างถูกต้องและมั่นใจว่าใช้งานได้
if (ClipboardItem.supports('web image/avif')) {
// Fetch remote AVIF image and obtain its blob representation.
const blob = await fetch('image.avif').then((response) => response.blob());
try {
// Write the image data to the clipboard, prepending the blob's actual
// type (`"image/avif"` with the string `"web "`, so it becomes
// `"web image/avif"`.
const clipboardItem = new ClipboardItem({
'web image/avif': blob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
}
ขณะนี้ฟังก์ชัน ClipboardItem.supports() อยู่ในเวอร์ชันเบย์สไลน์ใหม่แล้ว ซึ่งจะช่วยให้นักพัฒนาเว็บตรวจหาการรองรับคลิปบอร์ดสำหรับประเภท MIME ต่างๆ รวมถึงรูปแบบที่กำหนดเองของเว็บได้อย่างน่าเชื่อถือ การปรับปรุงนี้ทำให้การทำงานกับคลิปบอร์ดมีประสิทธิภาพและคาดการณ์ได้มากขึ้น ซึ่งจะปรับปรุงประสบการณ์ของผู้ใช้ในทุกเบราว์เซอร์