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

Пользовательский функционал для копирования текста в буфер обмена повышает удобство использования веб-приложений. Особенно для мобильных пользователей.

В этой короткой статье мы рассмотрим мою технику реализации копирования текста в буфер обмена с помощью JavaScript. Она написана на Angular. Но данный подход можно применить к любым проектам, на основе JavaScript или TypeScript.

Полная версия проекта доступна в этом репозитории GitHub. Демо-версию можно найти здесь.

Предположим, что в приложении веб-страница отображает код купона. На нее нужно добавить кнопку, после нажатия на которую пользователь мог бы скопировать код купона и вставить в другое место.

Рассмотрим код

Сначала мы проверяем, доступен ли API Clipboard. Если да, то записываем текстовую строку в буфер обмена. Если нет, то проверяем доступность API clipboardData. Если доступен, то присваиваем clipboardData значение  текстовой строки.

При отсутствии поддержки обоих API реализуем обходные пути для Microsoft Edge, iOS и Mac OS.

copy() {
try {
if ((navigator as any).clipboard) {
(navigator as any).clipboard.writeText(this.couponCode);
} else if ((window as any).clipboardData) { // для Internet Explorer
(window as any).clipboardData.setData('text', this.couponCode);
} else { // для других браузеров, iOS, Mac OS
this.copyToClipboard(this.inputEl.nativeElement);
}
this.tooltipText = 'Copied to Clipboard.'; // копирование проведено успешно.
} catch (e) {
this.tooltipText = 'Please copy coupon manually.'; // копирование не удалось.
}
}
private copyToClipboard(el: HTMLInputElement) {
const oldContentEditable = el.contentEditable;
const oldReadOnly = el.readOnly;
try {
el.contentEditable = 'true'; //  специально для iOS
el.readOnly = false;
this.copyNodeContentsToClipboard(el);
} finally {
el.contentEditable = oldContentEditable;
el.readOnly = oldReadOnly;
}
}
private copyNodeContentsToClipboard(el: HTMLInputElement) {
const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(el);
selection.removeAllRanges();
selection.addRange(range);
el.setSelectionRange(0, 999999);

Ссылка на gist

Третья и четвертая строчки кода будут работать в большинстве современных браузеров. В коде используется navigator.clipboard.writeText () – новый API для асинхронного буфера обмена, который позволяет напрямую обращаться к объекту clipboard из экземпляра navigator. Данный API в настоящее время поддерживается Chrome 66+, Firefox 63+, Opera 53+ и т.д.

Строки 5 и 6 предназначены для Internet Explorer и аналогичных браузерах. API задокументирован на странице в MSDN.

Строки 7 и 8 охватывают все остальные варианты. Если код завершается ошибкой, строки 11 и 12 обработают исключение и позволят пользователю скопировать текст вручную.

Чтобы реализовать поддержку iOS- устройств, предназначен код, расположенный в строках 21 и 22. После копирования строки с 24 по 26 восстановят элемент ввода до исходного состояния.

Демо примера можно изучить здесь. Полная версия проекта доступна в этом репозитории GitHub.