Javascript - как скопировать innerhtml в буфер обмена в vue.js?

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Использование для копирования Clipboard API

Смотрим, что пишется в документации:

API буфера обмена предоставляет возможность буфера обмена реагировать на команды (вырезать, копировать и вставить), а также выполнять асинхронное чтение и запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через API разрешений: разрешение на запись в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Должно быть запрошено разрешение на чтение из буфера обмена, что можно сделать, попытавшись прочитать данные из буфера обмена.

Этот API предназначен для замены доступа к буферу обмена с помощью . Почему было решено отказаться от него? Основной недостаток document.execCommand() в том, что эта операция синхронная (блокирующая — браузер блокирует страницу при запросе доступа к буферу обмена) и поддерживает только text/plain тип данных (см. ).

В Clipboard API запись данных в буфер реализует метод объекта (в нашем случае writeText это частный случай clipboard.write, упрощающий задачу и явно указывающий, что это текст). Чтение — метод readText. Работает с буфером обмена на промисах и позволяет работать с другими данными, отличными от обычного текста (например, с изображениями).

<div>
  <input type="text" class="WhatCopy" placeholder="Type something..." aria-label="Type something">
  <button class="btn" id="btn">Копировать в буфер обмена</button>
</div>

<div>
  <p class="Results"></p>
  <button class="btn" id="btn2">Вставить из буфера обмена</button>
</div>
<script>
const Read = document.querySelector('#btn2');
const Write = document.querySelector('#btn');

const Result = document.querySelector('.Results');
const TextInput = document.querySelector('.WhatCopy');

//Вставляем из буфера
Read.addEventListener('click', async(e)=> {
  e.preventDefault(); //предотвратить поведение по умолчанию в пользу вашей собственной логики
   try {
    const text = await navigator.clipboard.readText();
	Result.innerText = text;
    console.log('Вставлено: ', text);
  } catch (err) {
    console.error('Не удалось прочитать содержимое буфера обмена: ', err);
  }

});
  //Копируем в буфер
Write.addEventListener('click', () => {
  const inputValue = TextInput.value.trim();// trim () - это строковый метод, который используется для удаления пробельных символов в начале и в конце строки
  if (inputValue) { //Условие - Проверяем, есть ли что копировать, если нет - ничего не происходит
    navigator.clipboard.writeText(inputValue)
      .then(() => {      //Метод then() возвращает Promise
        TextInput.value = ''; // Очищаем текстовое поле в input
        if (Write.innerText !== 'Скопировано!') {//Проверяем текст кнопки
          const originalText = Write.innerText;//Записываем оригинальный исходный текст "Скопировать в буфер"
          Write.innerText = 'Скопировано!';//Меняем текст на "Скопировано!"
          setTimeout(() => { //Задержка, чтобы заменить текст кнопки на исходный
            Write.innerText = originalText;
             }, 1500);
        }
      })
      .catch(err => {
        console.log('Something went wrong', err);
      })
  }
});

</script>

Копировать в буфер обмена

Вставить из буфера обмена

Чем заменить устаревший тег <marqee> (как сделать бегущую строку) читайте здесь.

Читайте больше по теме:

Copy and Paste Data

The Clipboard API’s and are convenience options for the more generic and methods. These have less browser support but are able to copy and paste any type of data such as binary images.

Copying requires blob data typically returned by a or method. This is passed to a constructor so it can be written to the clipboard:

Pasting is more complex because multiple objects can be returned with differing content types. It’s therefore necessary to iterate through each type until a useful format is found. For example:

View the Clipboard API image demonstration (supported in Chromium-based browsers).

The code can be downloaded from GitHub. Refer to clipboardblob.js for the JavaScript.

This works in a similar way to the text demonstration, in that copy and paste buttons must point to DOM elements using a CSS selector in and attributes. For example:

Try copying image data from a graphics application, then use the paste button.

Компоненты распознавания и печати штрих-кодов Промо

Комплект программного обеспечения для реализации функций оптического распознавания штрих-кодов различных систем при помощи обычной web-камеры, а также их отображения в печатных формах. Программы могут работать в составе конфигураций, созданных на базе платформ «1С-Предприятие» версий 7.7, 8.2, 8.3. Компонент чтения кодов реализован в виде внешней компоненты 1С с COM-интерфейсом. Компонент отображения создан по стандартной технологии ActiveX для Windows, и может быть встроен в любое приложение, поддерживающее встраивание ActiveX элементов управления, например в документ Word или Excel, или форму VBA.

P.S. Добавлена новая версия программы распознавания. Новые функции: обработка видео в реальном режиме (а не по таймеру, как раньше), добавлена возможность распознавания штрих-кодов из графических файлов JPEG, PNG, GIF, BMP, а также передавать для распознавания картинки из 1С, теперь можно получить в 1С захваченное с камеры или файла изображение, как с выделением мест, содержащих коды, так и без, а также отдельные фрагменты изображений, содержащие код. Добавлены новые свойства и методы для программирования. Обновлена документация.

10 стартмани

Скопировать функцию в сборе с html примерами.

Сколько атрибутов уже прописано в функции?

Всего 4:

if(name_data.from ==»href») { newinput.value = theget. href;}

if(name_data.from ==»innerHTML») { newinput.value = theget. innerHTML;}

if(name_data.from ==»value») { newinput.value = theget. value;}

if(name_data.from ==»placeholder») { newinput.value = theget. placeholder;}

Как вы наверное поняли:

Меняется 3 или 4 позиции(если требуется добавить собственный атрибут откуда копировать):

id=»значение» — в элементе, откуда будем копировать.

data-copyfromid =»значение»(кнопка)

data-from = «Откуда»(кнопка… href,innerHTML,value,placeholder)

И если требуется добавляем собственные атрибуты, во внутрь функции.

Обзор бесплатных программ замены буфера обмена Windows

Программа замены буфера обмена Ditto отличный выбор

является лучшим бесплатным менеджером буфера обмена, который полностью удовлетворяет критериям. Эта простая, но мощная, очень быстрая и ресурсоемкая программа, которая хранит неограниченное количество данных буфера обмена в базе данных SQLite. Ditto имеет сотни различных настроек, так что настроить программу под себя сможет даже самый требовательный пользователь.Вот некоторые из его особенностей: окно поиска, которое позволяет найти трех дневных буфер обмена в течении нескольких секунд, поддержка трех различных виртуальных менеджеров буфера обмена, которые можно открыть с помощью нескольких комбинаций клавиш, а так же уникальные сетевые функции, которые позволяют обмениваться данными.

К недостаткам можно отнести только лишь то, что иногда могут возникать небольшие трудности с расположением окна.

В целом, Ditto является более надежной, эффективной и гибкой программой нежели, чем большинство ее конкурентов, и она будет отлично решать потребности как начинающих пользователей, так и продвинутых.

CLCL простой и надежный менеджер буфера обмена

представляет собой простой и надежный менеджер буфера обмена, который особенно хорошо взаимодействует со старыми версиями Windows, и который очень прост в использовании как клавиатурой, так и мышкой. Несмотря на то, что последний релиз был аж в 2005 году и вам необходимо устанавливать его вручную, CLCL до сих пор пользуется популярностью среди ряда пользователей.

Примечание: Помните, что для некоторых задач понятия времени попросту не существует. К примеру, большинство используемых команд консольной строки Windows были взяты из DOS-а.

ClipX приятный и простой менеджер буфера обмена Windows

является хорошо сделанным и простым менеджером буфера обмена. На сайте разработчика можно найти различные плагины, которые позволяют добавить различные специфические функции, такие как получение кода цвета изображения, липучки (отдельные скопированные буферы обмена), «поиск в Google» и другие. На сегодняшний момент, программа больше не развивается. Тем не менее, ClipX по прежнему остается очень неплохим менеджером буфера обмена.

Менеджер буфера обмена Clipboard Help+Spell полон возможностей

является многообещающим менеджером буфера обмена, полным возможностей. К вашим услугам быстрое добавление различных заметок и временных меток, мощные функции редактирования текста, проверка орфографии и многое другое. Несмотря на то, что утилита продолжает активно разрабатываться, у нее есть один существенный недостаток — она умеет обрабатывать только текст и не более.

Примечание: Помните, что буфер обмена позволяет копировать не только текст, но и изображения, файлы и т.д.

ArsClip отличный портативный менеджер буфера обмена Windows

будет хорошим вариантом для тех, кто ищет портативный менеджер буфера обмена. Кроме базовых функций, программа поддерживает и ряд специфичных, таких как создание макросов для копирования и вставки, поддержку JumpList Windows 7 и поддержку html-кода. Кроме того, в скачиваемом zip-архиве, вы найдете не только портативную версию и инсталлятор, но и исходный код программы. Так что если вы разбираетесь в программировании, то вы сможете в любой момент исправить или адаптировать под себя любые части программы.

Другие варианты использования

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

Например вы можете хранить номера своих электронных кошельков и вставлять их, когда необходим. Либо же хранить ваши почтовые ящики и также пользоваться этой вставкой, когда понадобится. Как видите, возможностей целая куча. Только тогда не забудьте в параметрах убрать галочку там, где написано «Максимальный срок храниения».

А если вам понадобится удалить какие-то записи, то это делается с помощью обычной кнопки Delete.

Я жалею, что не нашел эту программу раньше. Сейчас моя продуктивность работы за компьютером реально повысилась. А если вы хотите сделать свою работу за компьютером еще более продуктивной, простой и оптимизированной, то я настоятельно рекомендовал бы вам посмотреть этот видеокурс. Там рассказано про очень интересные фишки, как ускориться при работе за компьютером.

Работа функции копирования в буфер обмена.

Хотел просто написать алгоритм работы, но потом скатился до построчного объяснения функции :

С помощью querySelector получаем объект из элемента Dom по его id — который является «переменным», который в свою очередь должен находится в кнопке в атрибуте текст_ссылки(fromid).
var theget= document.querySelector(«#»+name_data .fromid);

Создаем новый input :

var newinput = document.createElement(«input»);
По переданным данным из второго data(from) по условию, получаем данные, которые передаем в value, ранее созданного «инпута».

if(name_data.from ==»href») { newinput.value = theget. href;}
if(name_data.from ==»innerHTML») { newinput.value = theget. innerHTML;}
if(name_data.from ==»value») { newinput.value = theget. value;}
if(name_data.from ==»placeholder») { newinput.value = theget. placeholder;}

Физически размещаем созданный «инпут» после body:

document.body.appendChild(newinput);

Выделаем данные в value :

newinput.select();

Копируем значение value :

document.execCommand(«copy»);

Удаляем созданный «инпут»:

document.body.removeChild(newinput);

Выводим результат на экран с помощью alert

alert(«Скопированный текст:\n» + newinput.value);

Работа с несколькими типами файлов

Большинство реализаций помещают в буфер обмена несколько форматов данных для одной операции копипасты. Для этого есть две причины: как разработчик приложения не можете знать возможности приложения, в которое пользователь будет копировать текст или изображения, вторая — многие приложения поддерживают вставку структурированных данных в виде простого текста. Для пользователям это реализуется обычно с помощью пунктов меню типа «Вставить и сопоставить стиль» (Paste and match style) или «Вставить без форматирования» (Paste without formatting).

В следующем примере показано, как это сделать. Здесь для получения данных изображения используется функция , но аналогично можно использовать или API доступа к файловой системе (File System Access API.).

Совместимость с браузерами

Desktop	Mobile
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Хромовый Android	Firefox для Android	Опера Андроид	Safari на IOS	Samsung Интернет
66	79	87	No	Yes	13.1	66	66	87	Yes	13.4	9.0
66 Конструктор принимает в качестве данных элемента только большой двоичный объект, но не строки или обещания, которые разрешаются в строки или большие двоичные объекты. См. Ошибку 1014310 .	79 Конструктор принимает в качестве данных элемента только большой двоичный объект, но не строки или обещания, которые разрешаются в строки или большие двоичные объекты. См. Ошибку 1014310 .	87	No	Yes Конструктор принимает в качестве данных элемента только большой двоичный объект, но не строки или обещания, которые разрешаются в строки или большие двоичные объекты. См. Ошибку 1014310 .	13.1	66 Конструктор принимает в качестве данных элемента только большой двоичный объект. Полная реализация также допускает строку или обещание, которое разрешается либо строкой, либо blob. См. Ошибку 1014310 .	66 Конструктор принимает в качестве данных элемента только большой двоичный объект. Полная реализация также допускает строку или обещание, которое разрешается либо строкой, либо blob. См. Ошибку 1014310 .	87	Yes Конструктор принимает в качестве данных элемента только большой двоичный объект, но не строки или обещания, которые разрешаются в строки или большие двоичные объекты. См. Ошибку 1014310 .	13.4	9.0 Конструктор принимает в качестве данных элемента только большой двоичный объект, но не строки или обещания, которые разрешаются в строки или большие двоичные объекты. См. Ошибку 1014310 .
66	79	87	No	Yes	13.1	66	66	87	Yes	13.4	9.0
No	No	87	No	No	13.1	No	No	87	No	13.4	No
66	79	87	No	Yes	13.1	66	66	87	Yes	13.4	9.0

Использование для копирования в буфер обмена select() и execCommand()

На w3schools есть пример, как реализовать копирование в буфер обмена с и :

<!-- The text field -->
<input type="text" value="Hello World" id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

Вот как он работает:

Copy text

Но скопировать текст из текстового блока так не получится. Для этого используется костыль суть которого заключается в следующем: получаем текст элемента, затем создаем элемент textarea или input (createElement, body.appendChild(textarea)), вставляем в textarea этот текст при помощи textarea.textContent= (а в input вставляем текст как атрибут value — input.value = ). Затем при помощи select() выбираем текст в созданном элементе и при помощи execCommand копируем в буфер обмена. В завершении удаляем созданный временный элемент при помощи body.removeChild(textarea) .

<p id="myInput">Hello</p>
<button id="btn" onclick="Copy('#myInput')">Copy text</button>
<script>
  function Copy(element) {
var copyText = document.querySelector('#myInput').textContent;
var copyText1 = document.querySelector('#myInput');
  var textarea = document.createElement("textarea");
  textarea.textContent = copyText;
  textarea.style.position = "fixed"; // Запретить прокрутку вниз страницы в MS Edge.
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  copyText1.style.background = "grey";
  document.body.removeChild(textarea);
  alert('Скопирован текст: ' +  copyText); 
  }
</script>

Или c на jQuery (c input и textarea):

<!--временный input-->
<script>
function Copy(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
  alert('Скопирован текст: ' +  copyText); 
}
</script>
<!--временный textarea-->
<script>
function Copy(element) {
  var $temp = $("<textarea>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>

Аналоги

До написания программы я перепробовал множество аналогов и составил свой личный рейтинг их полезности в работе программиста:

AceText — платный
ClipDiary — бесплатный для некоммерческого использования
Ditto — бесплатный
ArsClip — бесплатный
ClipMate — платный
ClipMagic — платный
ClipCache — платный
CLCL — бесплатный
и другие

Сравнение с аналогами

Если вы поклонник выбирать клип из маленького меню как например в CLCL, то ClipAngel вам скорее всего не подойдет, т.к. выбор клипа в нем осуществляется из основного окна программы (показано на первом скриншоте).

Часто задаваемые вопросы:

1. Что такое ClipAngel и зачем мне нужен менеджер буфера обмена?

Это утилита, которая ведет для вас историю буфера обмена. Она следит за изменением буфера обмена и сохраняет в свою внутренную базу данных полную историю скопированных данных.

2. Что такое история буфера обмена?

Это набор всех данных, которые вы копировали в буфер обмена: тексты в разных форматах (plain text, rtf, html), картинки, списки файлов. Каждый такой кусок данных мы называем «клип» (clip). Таким образом, история буфера обмена — это набор клипов в хронологической последовательности.

3. Зачем мне нужна история буфера обмена?

Иметь под рукой все когда-либо скопированные записи — очень удобно. Нет, даже не просто удобно — это потрясающе удобно. Вы должны попробовать, чтобы оценить всю ее мощь. В любой момент вы можете получить назад данные, которые копировали 10 минут назад или вчера. Вы можете найти и восстановить информацию, которая давно потеряна. И, главное — это быстрый, почти мгновенный доступ к последним скопированным клипам: вы сможете работать быстрее.

4. Я установил менеджер буфера обмена, но он показывает только один последний скопированный клип. Как мне получить доступ к данным, которые я копировал ранее?

К сожалению, не существует возможности получить доступ к данным, которые вы копировали в то время, пока программа не работала. Данные в буфере обмена замещаются при каждой операции копирования. Программа как раз и призвана исправить этот недостаток.

5. Что я могу делать с сохраненными данными?

Вы можете быстро скопировать их обратно в буфер обмена.
Вставить любой клип из истории напрямую в выбранное приложение
Искать нужный клип по его содержимому.
Узнать программу, из которой данные были скопированны.
Выборочно удалять клипы.

6. Есть ли поиск в сохраненной истории?

Да, конечно. Есть функция поиска по содержимому. Например, вы можете набрать «http://» в поле поиска, чтобы отфильтровать все клипы, которые содержат ссылку.

7. Как мне найти нужный клип, примерно зная его содержимое?

Просто начните вводить текст, когда фокус ввода находится в списке клипов или поле фильтра. Именно в таком состоянии открывается окно программы горячей клавишей (по умолчанию ALT+V). После ввода каждого символа список клипов будет сразу же обновляться и в нем будут оставаться только подходящие клипы. Выберите нужный клип привычным клавишами «Up», «Down», «Page Up», «Page Down» и т.д.

8. Как мне быстро сбросить фильтр поиска и увидеть всю историю буфера обмена?

Нажмите F9, чтобы сбросить фильтр поиска и увидеть все элементы истории буфера обмена.

9. Как использовать ClipAngel для быстрого сравнения текстов?

В настройках ангела есть «Горячая клавиша сравнения последних клипов». Также в настройках надо указать «Приложение сравнения файлов», если у вас установлена неизвестная ангелу менеджеру программа сравнения файлов. Известны ему программы Beyond Compare, ExamDiff Pro, WinMerge, Araxis Merge, DiffMerge, KDiff3. Если он не найдет такую программу, то откроет сайт для скачки бесплатной такой программы.
Итак после этой однократной подготовки, чтобы сравнить тексты, например из ячеек табличного документа отчета сравнения объектов конфигуратора, нужно
1. встать на каждую ячейку поочередно и нажимать CTRL+C
2. нажать горячую клавишу «Горячая клавиша сравнения последних клипов»
3. откроется приложение сравнения файлов в режиме текста и сравнивает содержимое 2-х последних скопированных ячеек

10. Как запретить ClipAngel захватывать пароли скопированные из хранилища паролей?

В настройках хранителя паролей KeePass 2.X в группе Security нужно включить флажок «Use «Clipboard Viewer Ignore’ clipboard format (not recommended)». В KeePass 1.X этого флажка нет, но он как бы всегда включен. Чтобы ClipAngel не захватывал пароли скопированные из других программ, нужно добавить их в настройку «Игнорируемые приложения в захвате клипов» или использовать на клипе команду «Игнорировать приложение».

11. Как заставить работать локально запущенный ClipAngel в терминальном сеансе?

Отображение скопированного текста в подсказке

Добавить CSS:

Пример

.tooltip { position: relative; display: inline-block;} .tooltip .tooltiptext { visibility: hidden; width: 190px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; }.tooltip .tooltiptext::after { content: «»; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}

Групповая обработка прикрепленных файлов

Кому не знакомы авралы в бухгалтерии, когда налоговая требует представить копии всех документов за два-три года? Кто не получал сюрпризов в виде отсутствия документов, когда завтра их нужно уже представлять проверяющим? 1С предлагает прикрепление и хранение копий документов (в том числе со сканера) в базе, а данная обработка решает вопрос их быстрой подборки, сортировки и выгрузки, а также быстрого и эффективного контроля наличия или отсутствия документов в базе с формированием реестров как выгруженных, так и отсутствующих документов.
В настоящий момент обработка бесплатна, в дальнейшем планируется платная версия с расширенными возможностями.
Скажите решительное «Нет» авралам в бухгалтерии и штрафам за несвоевременное представление документов!

4 стартмани

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

Сначала мы проверяем, доступен ли 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»

Writing Data

Consider this basic example, which implements a button that copies plain text when clicked:

This is much simpler than the current method of programmatically copying text, which requires us to select a text field and execute the “copy” command:

When using to copy data, you need to create an array of . Each is initialized with a mapping of MIME type to which may resolve either to a string or a of the same MIME type. The following example uses to copy a single item with both plain text and HTML representations.

A similar implementation using existing DataTransfer API would require us to create a hidden text field, install a event handler on the text field, focus it, trigger a programmatic copy, set data on the DataTransfer (within the event handler), and finally call .

Note that both and are asynchronous. If you attempt to write to the clipboard while a prior clipboard writing invocation is still pending, the previous invocation will immediately reject, and the new content will be written to the clipboard.

On both iOS and macOS, the order in which types are written to the clipboard is also important. WebKit writes data to the system pasteboard in the order specified — this means types that come before other types are considered by the system to have “higher fidelity” (that is, preserve more of the original content). Native apps on macOS and iOS may use this fidelity order as a hint when choosing an appropriate UTI (universal type identifier) to read.