Opublikowano: 23 września 2025 r.
Zdarzenie clipboardchange to nowa funkcja dodana do Chrome przez zespół Microsoft Edge. Umożliwia to efektywne monitorowanie zmian w schowku bez obciążania wydajności przez odpytywanie.
Możesz teraz testować zdarzenie clipboardchange w ramach wersji próbnej origin w Chrome i Edge od wersji 140.
Chętnie poznamy Twoją opinię na temat tej nowej funkcji, ponieważ chcemy ją w przyszłości ujednolicić.
Problemy związane z odpytywaniem schowka w celu wykrywania zmian
Aby dowiedzieć się, jakie treści są dostępne w schowku systemowym, musisz użyć nieefektywnych metod odpytywania. Na przykład internetowe aplikacje do edycji tekstu mogą chcieć włączać różne przyciski „Wklej” w zależności od tego, czy schowek zawiera tekst, obraz czy treść HTML.
Obecne podejście wymaga wielokrotnego wywoływania metody navigator.clipboard.read() w celu sprawdzenia zawartości schowka, jak pokazano w tym fragmencie kodu:
// 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
To rozwiązanie ma jednak poważne wady.
Wpływ na wydajność
Ciągłe sprawdzanie schowka powoduje niepotrzebne obciążenie. Każde wywołanie funkcji
navigator.clipboard.read() wymaga dostępu do schowka na poziomie systemu, co może negatywnie wpłynąć na wydajność aplikacji, zwłaszcza na urządzeniach o ograniczonych zasobach. Częstotliwość odpytywania staje się kompromisem między responsywnością a wydajnością.
Szybkie zużycie baterii
Na urządzeniach mobilnych częste sprawdzanie schowka może przyczyniać się do wyczerpywania baterii, ponieważ aplikacja stale uzyskuje dostęp do zasobów systemowych, nawet gdy użytkownik nie kopiuje ani nie wkleja aktywnie treści.
Niespójności w interfejsie użytkownika
Interwał odpytywania powoduje opóźnienia między skopiowaniem treści a aktualizacją interfejsu, która odzwierciedla nowy stan schowka. Użytkownicy mogą widzieć nieaktualne stany przycisku wklejania lub przez krótki czas nie mieć dostępu do prawidłowych opcji.
Kwestie dotyczące prywatności związane z nadmiernym odpytywaniem
Częste uzyskiwanie dostępu do schowka może budzić obawy o prywatność, ponieważ aplikacje stale odczytują dane ze schowka, nawet jeśli się nie zmieniły. Może to być uciążliwe dla użytkowników, którzy dbają o prywatność zawartości schowka.
Zdarzenie clipboardchange
Aby rozwiązać te problemy, wprowadziliśmy nowe zdarzenie o nazwie
clipboardchange i uruchamiamy wersję próbną origin w Edge i Chrome, aby umożliwić Ci testowanie jej w aplikacjach.
To zdarzenie umożliwia aplikacjom internetowym reagowanie na zmiany w schowku, zamiast aktywnie ich wyszukiwać. Jest on uruchamiany automatycznie, gdy treść jest kopiowana lub wycinana do schowka z dowolnej aplikacji, schowek jest czyszczony lub treść jest wklejana (co w niektórych przypadkach może spowodować wyczyszczenie schowka). Zdarzenie jest wywoływane tylko wtedy, gdy dokument jest aktywny.
Możesz nasłuchiwać zdarzenie clipboardchange, dodając detektor do interfejsu navigator.clipboard w ten sposób:
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);
});
Najważniejsze zalety
Zdarzenie clipboardchange ma kilka zalet w porównaniu z odpytywaniem:
- Wydajne: zdarzenia są wywoływane tylko wtedy, gdy faktycznie nastąpią zmiany.
- Chroniące prywatność: zdarzenie udostępnia tylko natywne typy MIME, a nie rzeczywistą treść.
- Brak próśb o uprawnienia: ponieważ nie są udostępniane żadne dane wrażliwe, nie są wymagane uprawnienia użytkownika.
- Reakcja w czasie rzeczywistym: interfejs użytkownika aktualizuje się natychmiast po zmianie zawartości schowka.
- Zależne od fokusu: zdarzenia są wywoływane tylko wtedy, gdy dokument jest aktywny.
Usługa types
Obiekt zdarzenia clipboardchange zawiera właściwość types, która zawiera tablicę typów MIME dostępnych w schowku:
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;
});
Działanie zaznaczania
Jeśli zmiany w schowku nastąpią, gdy dokument nie jest aktywny, po ponownym uzyskaniu przez niego aktywności systemową zostanie wywołane pojedyncze zdarzenie clipboardchange.
Informacje o historycznych zmianach w schowku nie będą dostępne. W types
będą uwzględniane tylko typy dostępne w momencie, gdy strona zyskała fokus.
Wypróbuj clipboardchange już dziś
Nowe zdarzenie clipboardchange możesz przetestować już dziś:
- lokalnie, włączając tę funkcję tylko w przeglądarce;
- Możesz też zarejestrować się w testach źródła w swojej produkcyjnej aplikacji internetowej.
Wykrywanie zdarzenia clipboardchange w celu zapewnienia lepszej zgodności
Po pierwsze, ponieważ jest to nowa funkcja, przed jej użyciem musisz sprawdzić, czy jest obsługiwana. Możesz to zrobić, sprawdzając istnienie właściwości onclipboardchange w navigator.clipboard, jak pokazano poniżej:
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);
}
Testowanie lokalne
Aby przetestować zdarzenie clipboardchange tylko w przeglądarce:
- Otwórz stronę
about://flags. - W polu Wyszukaj flagi wyszukaj
ClipboardChangeEvent. - W menu zmień wartość z Domyślna na Włączona.
- Ponownie uruchom przeglądarkę.
Rejestracja w okresie próbnym
Aby przetestować zdarzenie clipboardchange w swojej witrynie z udziałem prawdziwych użytkowników, zarejestruj się w wersji próbnej w Chrome lub Edge.
Wersja próbna origin będzie działać w Chrome i Edge w wersjach od 140 do 142 (od 2 września do 2 grudnia 2025 r.).
Przeczytaj artykuł Pierwsze kroki z eksperymentami dotyczącymi źródła, aby dowiedzieć się więcej o eksperymentach dotyczących źródła i o tym, jak zacząć z nich korzystać.
Prezentacja
Aby zobaczyć działanie zdarzenia, zapoznaj się z naszą wersją demonstracyjną i sprawdź kod źródłowy na GitHubie.
Ta wersja demonstracyjna pokazuje, jak za pomocą zdarzenia clipboardchange można utworzyć interfejs wklejania, który automatycznie aktualizuje się na podstawie zawartości schowka.
Spróbuj skopiować różne typy treści (tekst, obrazy, HTML) i zobacz, jak przyciski wklejania włączają się i wyłączają w czasie rzeczywistym bez odpytywania.
Prześlij opinię
Chętnie dowiemy się, jak zdarzenie clipboardchange sprawdza się w Twoich przypadkach użycia. Prześlij opinię, tworząc zgłoszenie w repozytorium W3C/clipboard-apis.
Publiczne sygnały o Twoim zainteresowaniu pomogą nam i innym przeglądarkom zrozumieć, jak ważna jest dla Ciebie ta funkcja, co może wpłynąć na proces standaryzacji.
Nawet jeśli to zdarzenie może być używane jako ulepszenie progresywne, chcemy je ustandaryzować w ramach specyfikacji interfejsu Clipboard API i w przyszłości wprowadzić we wszystkich przeglądarkach. Na razie możesz wrócić do odpytywania lub innych technik monitorowania schowka.