Опубликовано: 23 сентября 2025 г.
Событие clipboardchange — это новая функция, добавленная в Chrome командой Microsoft Edge. Она позволяет эффективно отслеживать изменения в буфере обмена без дополнительных затрат на производительность, связанных с опросом.
Теперь вы можете протестировать событие clipboardchange с помощью пробной версии origin в 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 и запускаем пробную версию Origin в 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 уже сегодня:
- Либо локально, включив функцию только в вашем браузере.
- Или в вашем производственном веб-приложении, зарегистрировавшись в пробной версии origin .
Обнаружение события 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. - Найдите
ClipboardChangeEventв поле «Флаги поиска» . - Используйте раскрывающийся список и измените значение с «По умолчанию» на «Включено» .
- Перезапустите браузер.
Зарегистрируйтесь для участия в пробной версии Origin
Чтобы протестировать событие clipboardchange на вашем сайте с реальными пользователями, зарегистрируйтесь в пробной версии Origin в Chrome или Edge . Пробная версия Origin будет доступна в Chrome и Edge версий 140 и 142 (со 2 сентября 2025 г. по 2 декабря 2025 г.).
Прочитайте статью «Начните с испытаний Origin», чтобы узнать больше об испытаниях Origin и о том, как начать работу.
Демо
Чтобы увидеть событие в действии, изучите нашу демо-версию и проверьте исходный код на GitHub.
В этой демонстрации показано, как можно использовать событие clipboardchange для создания адаптивного интерфейса вставки, который автоматически обновляется на основе содержимого буфера обмена.
Попробуйте скопировать различные типы контента (текст, изображения, HTML) и посмотрите, как кнопки вставки включаются и выключаются в режиме реального времени без какого-либо опроса!
Обратная связь
Мы будем рады узнать, как событие clipboardchange работает в ваших сценариях использования. Оставьте отзыв, создав сообщение о проблеме в репозитории W3C/clipboard-apis .
Публичные сигналы о вашем интересе помогут нам и другим браузерам понять важность этой функции для вас, что может повлиять на процесс стандартизации.
Даже если это событие можно использовать как прогрессивное улучшение, мы хотим стандартизировать его как часть спецификации API буфера обмена и в конечном итоге добиться его поддержки всеми браузерами. Пока же вы можете прибегнуть к опросу или другим методам мониторинга буфера обмена.