Вопрос много просматривают, поэтому соберу сюда более общие примеры.
Для копирования существует метод document.execCommand('copy')
, он копирует текущий выделенный текст на странице, если был вызван пользователем (например, при клике). Т.е. не получится просто запустить скрипт на странице и подсунуть любому посетителю текст без его ведома.
Выделение текста непосредственно из блока достаточно муторно: https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard
А для элементов <textarea>
и <input>
есть простой метод .select()
Поэтому проще создать дополнительное поле, отправить туда необходимый текст и скопировать его оттуда. И хорошо бы оформить это в виде функции, которая получает строку - копирует строку:
function copyToClipboard(str) {
var area = document.createElement('textarea');
document.body.appendChild(area);
area.value = str;
area.select();
document.execCommand("copy");
document.body.removeChild(area);
}
Далее, захочется как-то оповестить человеку, что копирование сработало. Это тоже может быть в виде функции, которая получает кнопку, меняет её детали, а через пару секунд возвращает всё на место. Примерно так:
function ui_copyDone(btn) {
var contentSaved = btn.innerHTML;
btn.innerHTML = 'Скопирова<span style="color: red;">но</span>';
btn.classList.add('copied'); // уже в CSS к классу .copied дописать любые детали
setTimeout(function() {
btn.innerHTML = contentSaved;
btn.classList.remove('copied');
}, 1500);
}
В итоге задача сводится только к тому, как вы будете передавать текст в функцию. А это уже достаточно просто. Несколько примеров:
На jQuery:
$('.js-copy').on('click', function() {
copyToClipboard( $(this).text() );
ui_copyDone( this );
// this → объект, в контексте которого вызвана функция (здесь: кликнутый HTML элемент
// $(this) → оно же, завернутое в jQuery-объект.
});
$('.js-copy-btn').each(function(index) {
$(this).on('click', function() {
copyToClipboard( $('.js-copy-target').eq(index).text() );
ui_copyDone( this );
});
// this → очередной элемент, который перебираем
// index → его номер, который совпадает с номером блока, откуда нужно копировать
});
/***/
function copyToClipboard(str) {
var area = document.createElement('textarea');
document.body.appendChild(area);
area.value = str;
area.select();
document.execCommand("copy");
document.body.removeChild(area);
}
function ui_copyDone(btn) {
var contentSaved = btn.innerHTML;
btn.innerHTML = 'Скопирова<span style="color: red;">но</span>';
btn.classList.add('copied');
setTimeout(function() {
btn.innerHTML = contentSaved;
btn.classList.remove('copied');
}, 1500);
}
.box {
border: 2px solid orange;
padding: 4px;
margin: 4px;
cursor: pointer;
}
.copied {
border-color: #045acf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="js-copy box">1. Кликни и копируй меня!</div>
<div class="js-copy box">2. Кликни и копируй меня!</div>
<hr>
<div class="js-copy-target box">1 1 1 1</div>
<button class="js-copy-btn">Скопировать</button>
<div class="js-copy-target box">2 2 2 2</div>
<button class="js-copy-btn">Скопировать</button>
И то же самое без jQuery:
setAutoCopyFeatures()
/***/
function setAutoCopyFeatures() {
onclick_copySelf(); /* class="js-copy" */
onclick_copyFrom(); /* class="js-copy-btn", "js-copy-target" */
// Открыл функцию - сразу видно, что она делает
// Не вдаваясь в подробности, можно вспомнить, какие классы нужно добавить в HTML
function onclick_copySelf() {
let copy = document.querySelectorAll('.js-copy');
for( let i = 0; i < copy.length; i++ ) {
copy[i].addEventListener('click', function() {
copyToClipboard( this.textContent );
ui_copyDone( this );
});
}
}
function onclick_copyFrom() {
let btn = document.querySelectorAll('.js-copy-btn');
for( let i = 0; i < btn.length; i++ ) {
btn[i].addEventListener('click', function() {
let div = document.querySelectorAll('.js-copy-target');
copyToClipboard( div[i].textContent );
ui_copyDone( this );
});
}
}
/***/
function copyToClipboard(str) {
var area = document.createElement('textarea');
document.body.appendChild(area);
area.value = str;
area.select();
document.execCommand("copy");
document.body.removeChild(area);
}
function ui_copyDone(btn) {
var contentSaved = btn.innerHTML;
btn.innerHTML = 'Скопирова<span style="color: red;">но</span>';
btn.classList.add('copied');
setTimeout(function() {
btn.innerHTML = contentSaved;
btn.classList.remove('copied');
}, 1500);
}
}
.box {
border: 2px solid orange;
padding: 4px;
margin: 4px;
cursor: pointer;
}
.copied {
border-color: #045acf;
}
<div class="js-copy box">1. Кликни и копируй меня!</div>
<div class="js-copy box">2. Кликни и копируй меня!</div>
<hr>
<div class="js-copy-target box">1 1 1 1</div>
<button class="js-copy-btn">Скопировать</button>
<div class="js-copy-target box">2 2 2 2</div>
<button class="js-copy-btn">Скопировать</button>
CopyToClipboard
!==copyToClipboard