Функция для копирования текста в буфер обмена

Содержимое:

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

Нажми на меня

HTML

В HTML мы просто указываем тестовый элемент, в который записываем произвольный текст.

<p class="test">Текст который мы будем копировать...</p>

JavaScript

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

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

Ниже функции, мы просто находим наш “подопытный” элемент и создаём на него событие нажатия мыши.

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

//Функция для копирования текста в буфер обмена
function copyToClipboard(str) {
 var area = document.createElement('textarea');
 
 document.body.appendChild(area);
 area.value = str;
 area.select();
 document.execCommand("copy");
 document.body.removeChild(area);
}


//Получаем наш тестовый элемент с текстом
let test = document.querySelector('p.test');


//Вешаем на элемент событие. Код будет выполняться после нажатия 
test.addEventListener('click', ()=>{
    copyToClipboard(test.innerHTML)
})
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime