בדיקת האירוע clipboardchange – דרך יעילה יותר למעקב אחרי לוח העריכה

Rohan Raja
Rohan Raja
LinkedIn
Patrick Brosset
Patrick Brosset
דף הבית

פורסם: 23 בספטמבר 2025

האירוע clipboardchange הוא תכונה חדשה שנוספה ל-Chrome על ידי הצוות של Microsoft Edge. כך אפשר לעקוב ביעילות אחרי שינויים בלוח העריכה בלי להשתמש בשיטת הסקר (polling) שפוגעת בביצועים.

עכשיו אפשר לבדוק את האירוע 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() דורשת גישה ללוח ההעתקה ברמת המערכת, מה שיכול להשפיע לרעה על הביצועים של האפליקציה, במיוחד במכשירים עם משאבים מוגבלים. תדירות הסקרים היא פשרה בין מהירות התגובה לבין הביצועים.

הסוללה מתרוקנת מהר מדי

במכשירים ניידים, בדיקה תכופה של הלוח יכולה לגרום לריקון הסוללה, כי האפליקציה ניגשת למשאבי המערכת באופן רציף גם כשהמשתמש לא מעתיק או מדביק תוכן באופן פעיל.

חוסר עקביות בחוויית המשתמש

מרווח הזמן בין הבדיקות יוצר עיכובים בין הזמן שבו התוכן מועתק לבין הזמן שבו ממשק המשתמש מתעדכן כדי לשקף את המצב החדש של הלוח. יכול להיות שהמשתמשים יראו מצבים לא עדכניים של לחצני ההדבקה, או יחוו תקופות קצרות שבהן האפשרויות הנכונות לא זמינות.

בעיות פרטיות שקשורות לשליחת יותר מדי בקשות

גישה תכופה ללוח יכולה לעורר חששות לגבי פרטיות, כי האפליקציות קוראות באופן רציף את הנתונים בלוח גם אם הם לא השתנו. הדבר עלול להיתפס כפלישה לפרטיות על ידי משתמשים שחשוב להם לשמור על פרטיות התוכן בלוח ההעתקות.

האירוע clipboardchange

כדי להתמודד עם האתגרים האלה, הטמענו אירוע חדש בשם clipboardchange, ואנחנו משיקים גרסת מקור לניסיון ב-Edge וב-Chrome, כדי שתוכלו לבדוק אותו באפליקציות שלכם.

האירוע הזה מאפשר לאפליקציות אינטרנט להגיב באופן ריאקטיבי לשינויים בלוח, במקום לבצע סקרים פרואקטיביים כדי לזהות אותם. האירוע מופעל אוטומטית כשתוכן מועתק או נחתך ללוח מכל אפליקציה, כשלוח העריכה מתרוקן או כשתוכן מודבק (מה שעלול לרוקן את לוח העריכה במקרים מסוימים). האירוע מופעל רק כשהמסמך נמצא במוקד.

אפשר להאזין לאירוע clipboardchange על ידי הוספת מאזין לממשק 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 מקוריים, ולא תוכן בפועל.
  • לא מוצגות בקשות להרשאה: מכיוון שלא נחשפים נתונים רגישים, לא נדרשת הרשאת משתמש.
  • תגובה בזמן אמת: ממשק המשתמש מתעדכן באופן מיידי כשמשתנה התוכן בלוח העריכה.
  • מודעים למיקוד: האירועים מופעלים רק כשהמסמך נמצא במיקוד.

הנכס 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 בדפדפן בלבד:

  1. פותחים את הדף about://flags.
  2. מחפשים את ClipboardChangeEvent בתיבה Search flags.
  3. משתמשים בתפריט הנפתח ומשנים את הערך מDefault (ברירת מחדל) לEnabled (מופעל).
  4. מפעילים מחדש את הדפדפן.

הרשמה לתקופת ניסיון של תכונה חדשה

כדי לנסות את אירוע clipboardchange באתר שלכם עם משתמשים אמיתיים, צריך להירשם לתקופת הניסיון של מקור ב-Chrome או ב-Edge. גרסת המקור לניסיון תפעל ב-Chrome וב-Edge בין גרסאות 140 ל-142 (בין 2 בספטמבר 2025 ל-2 בדצמבר 2025).

במאמר איך מתחילים להשתמש בגרסאות ניסיון של מקורות אפשר לקרוא מידע נוסף על גרסאות ניסיון של מקורות ועל תחילת העבודה איתן.

הדגמה (דמו)

כדי לראות את האירוע בפעולה, אפשר לעיין בהדגמה שלנו ולבדוק את קוד המקור ב-GitHub.

בהדגמה הזו מוצג איך אפשר להשתמש באירוע clipboardchange כדי ליצור ממשק הדבקה רספונסיבי שמתעדכן אוטומטית על סמך התוכן בלוח הגזירה.

כדאי לנסות להעתיק סוגים שונים של תוכן (טקסט, תמונות, HTML) ולראות איך הלחצנים להדבקה מופעלים ומושבתים בזמן אמת בלי סקרים!

משוב

נשמח לשמוע ממך איך האירוע clipboardchange מתאים לתרחישי השימוש שלך. כדי לשלוח משוב, יוצרים בעיה במאגר W3C/clipboard-apis.
אותות ציבוריים לגבי תחומי העניין שלכם יעזרו לנו ולדפדפנים אחרים להבין את החשיבות של התכונה הזו עבורכם, וזה יכול לעזור בתהליך הסטנדרטיזציה.

גם אם אפשר להשתמש באירוע הזה כשיפור מתקדם, אנחנו רוצים לתקנן אותו כחלק ממפרט Clipboard API, ובסופו של דבר לראות אותו מאומץ על ידי כל הדפדפנים. בשלב הזה, אפשר לחזור לשימוש בטכניקות של בדיקת מצב או בטכניקות אחרות של מעקב אחרי הלוח.

מידע נוסף