ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Копируем текст в буфер обмена на JavaScript

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

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

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

HTML

Код
<div>
  <p id="punkt-kopirovaniye">Здесь задаем значение виде текста, чтоб по клику можно занести в буфер обмена</p>
  <button onclick="copyToClipboard()">Скопировать данные</button>
<div>

Ничего особенного, чтобы увидеть здесь тег p с каким-то фиктивным контентом и button с функцией onclick. То здесь должны поставить метку id на свой тег p, чтобы иметь возможность настроить target на нее с помощью этой функции.

Это JavaScript для копирования в буфер обмена

Теперь давайте напишем нашу функцию, а затем пройдемся по каждой строке кода:

Код
function copyToClipboard() {
  const str = document.getElementById('punkt-kopirovaniye').innerText;
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}

На этом вся установка, но нужно подметить, что оформление здесь нет, что можете уже сами поставить, это сделать красивую кнопку, а также форму под описание, которое изначально видно.

Давайте рассмотрим код построчно:

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

Затем мы приступаем к созданию нового textarea элемента и устанавливаем некоторые свойства для него:

1. Устанавливаем значение в соответствии с содержанием нашей строки.
2. Устанавливаем readonly, под абсолютное положение и оставляем -9999px только для того, чтобы сделать наш пользователь textarea невидимым изначально.

Затем мы добавляем элемент, чтобы сразу после этого мы могли обратиться select() к нему. Если вы внедряете функцию копирования в буфер обмена, например в поле комментария в котором возможно уже используется textarea элемент, то можете обратиться select() к нему напрямую, не создавая новый элемент DOM, как мы делаем в этом руководстве.

После того как мы закончим, select() и задействуем document.execCommand('copy'), чтобы скопировать выбранный контент. Теперь, если вы попытаетесь нажать «Ctrl + V» или просто щелкните правой кнопкой мыши и выберите «Вставить», то увидите, что содержимое тега p скопировано в буфер обмена.

Демонстрация
03 Марта 2020 Загрузок: 1 Просмотров: 3387 Комментариев: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 5
Kosten
Kosten 13 Апреля 2020 09:481
0
Если вам нужна эта функциональность, но только в другой форме, то здесь посмотрите материал копирование в буфер с помощью JavaScript, который аналогично работает по копированию в один клик.
WindCrack67
WindCrack67 06 Ноября 2021 18:162
0
Не работает если добавить 2 блок. Копируется только первый :(
-SAM-
-SAM- 06 Ноября 2021 18:514
0
Не рассчитано на то, что на странице будет несколько элементов с одинаковым id (собственно, их по правим html и не должно быть в коде). Скрипт срабатывает для того блока, который идёт выше.

Вот решение:
Код
<div>
  <p id="item-to-copy1">ZorNet.Ru</p>
  <button onclick="copyToClipboard(1)">Копируем</button>
</div>

<div>
  <p id="item-to-copy2">Сайт для вебмастера</p>
  <button onclick="copyToClipboard(2)">Копируем</button>
</div>

<script>
function copyToClipboard(id) {
  const str = document.getElementById('item-to-copy'+id).innerText;
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}
</script>
WindCrack67
WindCrack67 06 Ноября 2021 18:163
0
Не работает если добавить 2 блок. Копируется только первый :(
Kosten
Kosten 06 Ноября 2021 19:275
+1
Как понимаю, вам дали полный ответ, если вас не устраивает, то рассмотрите этот вариант, там как понимаю можно несколько раз сделать, а точнее сколько, сколько вам нужно. Так как нужно менять #text1, #text2 и так далее.
avatar