منتشر شده: ۲۳ سپتامبر ۲۰۲۵
رویداد clipboardchange یک ویژگی جدید است که توسط تیم مایکروسافت اج به کروم اضافه شده است. این رویداد به شما امکان می‌دهد تغییرات کلیپ‌بورد را بدون سربار عملکردی ناشی از رای‌گیری، به طور موثر رصد کنید.
اکنون می‌توانید رویداد clipboardchange را با یک نسخه آزمایشی origin در Chrome و Edge ، از نسخه ۱۴۰، آزمایش کنید. ما از هرگونه بازخوردی که ممکن است هنگام آزمایش این ویژگی جدید داشته باشید، استقبال می‌کنیم، زیرا در نهایت امیدواریم که آن را استاندارد کنیم.
چالش‌های نمونه‌برداری از کلیپ‌بورد برای تشخیص تغییرات
برای اینکه بدانید چه محتوایی در کلیپ‌بورد سیستم موجود است، باید از روش‌های ناکارآمد نظرسنجی استفاده کنید. به عنوان مثال، برنامه‌های وب ویرایش متن ممکن است بخواهند دکمه‌های «چسباندن» متفاوتی را بر اساس اینکه کلیپ‌بورد حاوی متن، تصویر یا محتوای 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() نیاز به دسترسی به کلیپ‌بورد در سطح سیستم دارد که می‌تواند تأثیر منفی بر عملکرد برنامه شما، به خصوص در دستگاه‌های با محدودیت منابع، داشته باشد. تعداد دفعات بررسی به یک بده‌بستان بین پاسخگویی و عملکرد تبدیل می‌شود.
تخلیه باتری
در دستگاه‌های تلفن همراه، سرکشی مکرر به کلیپ‌بورد می‌تواند به تخلیه باتری کمک کند، زیرا برنامه به طور مداوم به منابع سیستم دسترسی پیدا می‌کند، حتی زمانی که کاربر به طور فعال محتوا را کپی یا پیست نمی‌کند.
تناقضات تجربه کاربری
فاصله‌ی زمانی نظرسنجی، بین زمان کپی شدن محتوا و به‌روزرسانی رابط کاربری برای انعکاس وضعیت جدید کلیپ‌بورد، تأخیر ایجاد می‌کند. کاربران ممکن است وضعیت دکمه‌های چسباندن قدیمی را مشاهده کنند یا دوره‌های کوتاهی را تجربه کنند که گزینه‌های صحیح در دسترس نباشند.
نگرانی‌های مربوط به حریم خصوصی با نظرسنجی بیش از حد
دسترسی مکرر به کلیپ‌بورد می‌تواند نگرانی‌های مربوط به حریم خصوصی را افزایش دهد، زیرا برنامه‌ها به طور مداوم داده‌های کلیپ‌بورد را می‌خوانند، حتی زمانی که تغییر نکرده‌اند. این امر می‌تواند برای کاربرانی که به حریم خصوصی خود اهمیت می‌دهند، مزاحمت ایجاد کند.
رویداد clipboardchange
برای پرداختن به این چالش‌ها، ما یک رویداد جدید به نام clipboardchange پیاده‌سازی کرده‌ایم و در حال راه‌اندازی یک نسخه آزمایشی از آن در Edge و Chrome هستیم تا بتوانید آن را در برنامه‌های خود آزمایش کنید.
این رویداد به برنامه‌های وب اجازه می‌دهد تا به جای جمع‌آوری اطلاعات از حافظه موقت (proactive polling)، به صورت واکنشی به تغییرات کلیپ‌بورد پاسخ دهند. این رویداد به طور خودکار زمانی اجرا می‌شود که محتوا از هر برنامه‌ای کپی یا در کلیپ‌بورد برش داده شود، کلیپ‌بورد پاک شود، یا محتوا جای‌گذاری شود (که در برخی موارد ممکن است کلیپ‌بورد را پاک کند). این رویداد فقط زمانی اجرا می‌شود که سند فوکوس داشته باشد.
می‌توانید با اضافه کردن یک شنونده (listener) در رابط navigator.clipboard ، همانطور که در اینجا نشان داده شده است، به رویداد clipboardchange گوش دهید:
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 مزایای متعددی نسبت به polling ارائه می‌دهد:
- کارآمد : رویدادها فقط زمانی اجرا می‌شوند که تغییرات واقعاً رخ دهند.
- حفظ حریم خصوصی : این رویداد فقط انواع MIME بومی را نمایش می‌دهد، نه محتوای واقعی را.
- بدون نیاز به اجازه کاربر : از آنجایی که هیچ داده حساسی افشا نمی‌شود، نیازی به اجازه کاربر نیست.
- پاسخگویی بلادرنگ : رابط کاربری بلافاصله پس از تغییر محتوای کلیپ‌بورد به‌روزرسانی می‌شود.
- آگاه از فوکوس : رویدادها فقط زمانی اجرا می‌شوند که سند فوکوس داشته باشد.
ویژگی 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را باز کنید. - در کادر Search flags
ClipboardChangeEventرا جستجو کنید. - از منوی کشویی استفاده کنید و مقدار را از پیش‌فرض به فعال تغییر دهید.
- مرورگر خود را مجدداً راه اندازی کنید.
برای نسخه آزمایشی Origin ثبت نام کنید
برای امتحان کردن رویداد clipboardchange در سایت خود با کاربران واقعی، در نسخه آزمایشی origin در کروم یا اج ثبت نام کنید. نسخه آزمایشی origin در کروم و اج بین نسخه‌های ۱۴۰ و ۱۴۲ (بین ۲ سپتامبر ۲۰۲۵ و ۲ دسامبر ۲۰۲۵) اجرا خواهد شد.
برای کسب اطلاعات بیشتر در مورد آزمایش‌های مبدا و نحوه شروع، بخش «شروع با آزمایش‌های مبدا» را مطالعه کنید.
نسخه آزمایشی
برای دیدن این رویداد در عمل، نسخه آزمایشی ما را بررسی کنید و کد منبع را در GitHub بررسی کنید.
این دمو نشان می‌دهد که چگونه می‌توان از رویداد clipboardchange برای ایجاد یک رابط کاربری paste واکنش‌گرا استفاده کرد که به‌طور خودکار بر اساس محتوای کلیپ‌بورد شما به‌روزرسانی می‌شود.
سعی کنید انواع مختلف محتوا (متن، تصاویر، HTML) را کپی کنید و ببینید که چگونه دکمه‌های چسباندن (paste) بدون هیچ گونه نظرسنجی (polling) در لحظه فعال و غیرفعال می‌شوند!
بازخورد
ما دوست داریم از شما در مورد نحوه عملکرد رویداد clipboardchange برای موارد استفاده شما بشنویم. با ایجاد یک مشکل در مخزن W3C/clipboard-apis بازخورد خود را ارائه دهید.
سیگنال‌های عمومی در مورد علاقه شما به ما و سایر مرورگرها کمک می‌کند تا اهمیت این ویژگی را برای شما درک کنیم، که می‌تواند در فرآیند استانداردسازی مؤثر باشد.
حتی اگر این رویداد بتواند به عنوان یک پیشرفت تدریجی مورد استفاده قرار گیرد، ما می‌خواهیم آن را به عنوان بخشی از مشخصات API کلیپ‌بورد استانداردسازی کنیم و در نهایت شاهد پذیرش آن توسط همه مرورگرها باشیم. در حال حاضر، می‌توانید به سراغ رای‌گیری یا سایر تکنیک‌های نظارت بر کلیپ‌بورد بروید.