Menguji peristiwa clipboardchange—cara yang lebih efisien untuk memantau papan klip

Rohan Raja
Rohan Raja
LinkedIn
Patrick Brosset
Patrick Brosset
Halaman Beranda

Dipublikasikan: 23 September 2025

Peristiwa clipboardchange adalah fitur baru yang ditambahkan ke Chrome oleh tim Microsoft Edge. API ini memungkinkan Anda memantau perubahan papan klip secara efisien tanpa overhead performa polling.

Sekarang Anda dapat menguji peristiwa clipboardchange dengan uji coba origin di Chrome dan Edge, mulai dari versi 140. Kami menerima masukan apa pun yang mungkin Anda miliki saat menguji fitur baru ini karena kami pada akhirnya berharap dapat menstandarkannya.

Tantangan melakukan polling pada papan klip untuk mendeteksi perubahan

Untuk mengetahui konten apa yang tersedia di papan klip sistem, Anda harus menggunakan metode polling yang tidak efisien. Misalnya, aplikasi web pengeditan teks mungkin ingin mengaktifkan tombol "Tempel" yang berbeda berdasarkan apakah papan klip berisi teks, gambar, atau konten HTML.

Pendekatan saat ini untuk mencapai hal ini mengharuskan Anda memanggil metode navigator.clipboard.read() berulang kali untuk memeriksa konten papan klip, seperti yang ditunjukkan oleh cuplikan kode berikut:

// 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

Meskipun cara ini berhasil, ada juga kekurangan yang signifikan.

Dampak performa

Terus-menerus melakukan polling pada papan klip akan menciptakan overhead yang tidak perlu. Setiap panggilan ke navigator.clipboard.read() memerlukan akses papan klip tingkat sistem, yang dapat berdampak negatif pada performa aplikasi Anda, terutama pada perangkat dengan keterbatasan resource. Frekuensi polling menjadi kompromi antara responsivitas dan performa.

Baterai cepat habis

Pada perangkat seluler, polling papan klip yang sering dapat menyebabkan pengurasan daya baterai karena aplikasi terus mengakses resource sistem meskipun pengguna tidak secara aktif menyalin atau menempelkan konten.

Ketidakkonsistenan pengalaman pengguna

Interval polling menyebabkan penundaan antara waktu konten disalin dan saat UI diperbarui untuk mencerminkan status papan klip baru. Pengguna mungkin melihat status tombol tempel yang sudah tidak berlaku atau mengalami periode singkat saat opsi yang benar tidak tersedia.

Masalah privasi terkait polling berlebihan

Seringnya akses ke papan klip dapat menimbulkan masalah privasi, karena aplikasi terus membaca data papan klip meskipun data tersebut tidak berubah. Hal ini dapat terasa mengganggu bagi pengguna yang memperhatikan privasi konten papan klip mereka.

Acara clipboardchange

Untuk mengatasi tantangan ini, kami telah menerapkan peristiwa baru yang disebut clipboardchange, dan meluncurkan uji coba origin di Edge dan Chrome, sehingga Anda dapat mengujinya di aplikasi Anda.

Peristiwa ini memungkinkan aplikasi web merespons perubahan papan klip secara reaktif, bukan melakukan polling secara proaktif untuk perubahan tersebut. Peristiwa ini akan otomatis dipicu saat konten disalin atau dipotong ke papan klip dari aplikasi apa pun, papan klip dihapus, atau konten ditempel (yang dapat menghapus papan klip dalam beberapa kasus). Peristiwa hanya dipicu saat dokumen memiliki fokus.

Anda dapat memproses peristiwa clipboardchange dengan menambahkan pemroses pada antarmuka navigator.clipboard seperti yang ditunjukkan di sini:

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);
});

Keunggulan utama

Peristiwa clipboardchange memberikan beberapa manfaat dibandingkan polling:

  • Efisien: Peristiwa hanya diaktifkan saat perubahan benar-benar terjadi.
  • Menjaga privasi: Acara hanya mengekspos jenis MIME native, bukan konten sebenarnya.
  • Tidak ada dialog izin: Karena tidak ada data sensitif yang diekspos, tidak ada izin pengguna yang diperlukan.
  • Respons real-time: UI akan langsung diperbarui saat konten di papan klip berubah.
  • Sadari fokus: Peristiwa hanya dipicu saat dokumen memiliki fokus.

Properti types

Objek peristiwa clipboardchange menyertakan properti types, yang berisi array jenis MIME yang tersedia di papan klip:

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;
});

Perilaku fokus

Jika perubahan papan klip terjadi saat dokumen tidak dalam fokus, satu peristiwa clipboardchange akan diaktifkan saat dokumen mendapatkan kembali fokus sistem. Informasi perubahan papan klip historis tidak akan tersedia, hanya jenis yang tersedia saat halaman mendapatkan fokus yang akan disertakan dalam anggota types.

Uji acara clipboardchange hari ini

Anda dapat menguji peristiwa clipboardchange yang baru hari ini:

  • Secara lokal, dengan mengaktifkan fitur di browser Anda saja.
  • Atau di aplikasi web produksi Anda, dengan mendaftar ke uji coba origin.

Mendeteksi peristiwa clipboardchange untuk kompatibilitas yang lebih baik

Pertama, karena ini adalah fitur baru, Anda harus mendeteksi dukungan fitur ini sebelum menggunakannya. Anda dapat melakukannya dengan menguji keberadaan properti onclipboardchange di navigator.clipboard, seperti yang ditunjukkan di sini:

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);
}

Menguji secara lokal

Untuk menguji peristiwa clipboardchange di browser Anda saja:

  1. Buka halaman about://flags.
  2. Telusuri ClipboardChangeEvent di kotak Search flags.
  3. Gunakan menu drop-down dan ubah nilai dari Default menjadi Diaktifkan.
  4. Mulai ulang browser.

Mendaftar untuk uji coba origin

Untuk mencoba peristiwa clipboardchange di situs Anda dengan pengguna sebenarnya, daftar ke uji coba origin di Chrome atau Edge. Uji coba origin akan berjalan di Chrome dan Edge antara versi 140 dan 142 (antara 2 September 2025 dan 2 Desember 2025).

Baca Mulai menggunakan uji coba asal untuk mempelajari lebih lanjut uji coba asal dan cara memulainya

Demo

Untuk melihat cara kerja acara ini, pelajari demo kami dan lihat kode sumber di GitHub.

Demo ini menunjukkan cara menggunakan peristiwa clipboardchange untuk membuat antarmuka tempel yang responsif dan otomatis diperbarui berdasarkan konten papan klip Anda.

Coba salin berbagai jenis konten (teks, gambar, HTML) dan lihat cara tombol tempel diaktifkan dan dinonaktifkan secara real-time tanpa polling.

Masukan

Kami ingin mendengar dari Anda tentang cara kerja acara clipboardchange untuk kasus penggunaan Anda. Berikan masukan dengan membuat masalah di repositori W3C/clipboard-apis.
Sinyal publik tentang minat Anda akan membantu kami dan browser lain memahami pentingnya fitur ini bagi Anda, yang dapat memengaruhi proses standarisasi.

Meskipun peristiwa ini dapat digunakan sebagai peningkatan progresif, kami ingin menstandarkannya sebagai bagian dari spesifikasi Clipboard API, dan pada akhirnya melihatnya diadopsi oleh semua browser. Untuk saat ini, Anda dapat kembali ke polling atau teknik pemantauan papan klip lainnya.

Pelajari lebih lanjut