Возможность взаимодействия с буфером обмена хоста пользователя веб-разработчики считают как благом, так и злом одновременно. В этой статье мы рассмотрим новый способ использовать буфер обмена с помощью navigator.clipboard API.
С одной стороны, приятно позволить пользователям легко копировать текст, например адреса электронных кошельков. При этом опасность заключается в том, что случайное копирование какой-либо персональной информации и вставке форму может привести к ее утечке.
Ранее для выполнения этой задачи применялся метод document.execCommand(‘copy’), но он не являлся надежным. Теперь буфером обмена можно управлять через navigator.clipboard API. Он позволяет использовать асинхронные методы readText() и writeText() для управления данными.
Методы readText() и writeText()
Давайте разберемся, как это работает! Эти методы достаточно просты в использовании. Но выполнить ниже представленный код как обычно не получится из-за протоколов безопасности браузера.
// Копируем текст в буфер обмена
document.body.addEventListener(‘click, (e) => {
await navigator.clipboard.writeText('Hello!);
});// Получаем текст из буфера обмена
document.body.addEventListener(‘click’, (e) => {
const text = await navigator.clipboard.readText();
});Как правило, его следует запускать внутри прослушивателя событий, который будет ожидать от пользователя определенных действий.
Кроссбраузерность
Все современные браузеры поддерживают navigator.clipboard API. Но в любой семье всегда не без урода, поэтому Internet Explorer его не воспринимает.
Заключение
Теперь в руках разработчиков имеется асинхронный и более надежный API, чем использовавшийся в старые времена грубый прием через execCommand. Тем не менее, вопрос о том, как можно применять эту новинку остается актуальным. Ведь и navigator.clipboard API позволяет вставить в буфер обмена любой текст. Остается лишь сказать, что следует использовать его исключительно во благо за исключением IE.
