Как копировать текст в буфер обмена с помощью 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.

Пожалуйста, оставляйте свои комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, подписки, лайки!

Данная публикация является переводом статьи «Copy Text to Clipboard Using JavaScript» , подготовленная редакцией проекта.

Меню