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

Демонстрация
2020-03-03 Загрузок: 1 Просмотров: 334 Комментарий: (0)

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

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

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

Комментарий: 0
avatar