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

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

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

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

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

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

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

Рассмотрим программный код

Сначала мы проверяем, доступен ли 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 OSthis.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'; // специально для iOSel.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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *