Как использовать буфер обмена на JavaScript

Возможность использовать буфер обмена на JavaScript хоста пользователя некоторые веб-разработчики считают как благом, так и злом одновременно. В этой статье мы рассмотрим новый способ с помощью navigator.clipboard API. С одной стороны, приятно позволить пользователям легко копировать текст, например адреса электронных кошельков. При этом опасность заключается в том, что случайное копирование какой-либо персональной информации и вставке форму может привести к её утечке.

Буфер обмена на JavaScript и 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();     
});

Как правило, его следует запускать внутри прослушивателя событий, который будет ожидать от пользователя определенных действий.

Читайте также: Метод repeat в JavaScript — альтернатива циклу при работе со строками.

Буфер обмена на JavaScript: кроссбраузерность

Все современные браузеры поддерживают navigator.clipboard API, поэтому теперь можно легко скопировать в буфер обмена текст на JavaScript. Но в любой семье всегда не без урода, поэтому Internet Explorer его не воспринимает.

Заключение

Теперь в руках разработчиков имеется асинхронный и более надежный API, чем использовавшийся в старые времена грубый прием через execCommand. Тем не менее, вопрос о том, как можно применять эту новинку остается актуальным. Ведь и navigator.clipboard API позволяет вставить в буфер обмена любой текст. Остается лишь сказать, что следует использовать его исключительно во благо за исключением Internet Explorer.