Привет, в новой записи я покажу как сделать кнопку которая будет копировать текст из указанного элемента. Мы создадим функцию которая будет после любого указанного события копировать текст в буфер обмена.
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)
})
