Часто перед владельцем сайта стоит задача сделать кнопку "Копировать в буфер обмена". Это необходимо для лучшего пользовательского опыта. В этой статье вы найдете код Javascript и css для того, чтобы осуществить копирование одним кликом мышки. Узнайте также, как копировать текст на телефонах android и ios.
1 способ создания кнопки Copy Clipboard JS
Посмотрите на первый вариант кнопки копирования:
.copy-clipboard { font-weight: 600; position: relative; padding: 4px 34px 4px 8px; cursor: pointer; border-radius: 4px; border: 1px solid rgb(0, 130, 229); background: rgb(232, 245, 255); font-size: 14px; display: inline-flex; line-height: 1.3; min-width: 120px; color: rgb(0, 130, 229) !important; } .copy-clipboard{position:relative;padding:4px 8px;border-radius:8px;padding-right:34px;cursor:pointer;border-radius:4px;border:1px solid #0082E5;background:#E8F5FF;color:#0082E5 !important;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:1.3;min-width:120px;}/*!sc*/ .copy-clipboard:hover::after{background-size:100%;top:1px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}/*!sc*/ .copy-clipboard::before, .copy-clipboard::after{position:absolute;content:"";}/*!sc*/ .copy-clipboard::after{background:url(https://mycrib.ru/wp-content/uploads/2024/04/copy-icon.png) no-repeat;background-size:90%;width:20px;height:20px;top:3px;right:6px;}/*!sc*/ .copy-clipboard::before{content:attr(data-text);background:#000;color:#fff;font-size:14px;padding:4px 12px;border-radius:8px;bottom:100%;right:-30px;display:none;}/*!sc*/ .copy-clipboard:hover::before{display:block;}/*!sc*/A9HAW7SSYY8W — Некоторый текст или код для копированияDFGHFDHJKL7HJ
Как вы могли заметить, при клике на кнопку, происходит замена всплывающей подсказки на "Copied!" и содержимое кнопки копируется в буфер. Для того, чтобы сделать такую кнопку, были использованы коды HTML и CSS:
<span class="copy-clipboard" style="color: #008000;" data-text="Copy To Clipboard">A9HAW7SSYY8W</span>
Можно добавить неограниченное количество кнопок на страннице HTML, и они все будут работать корректно.
Код JavaScript:
const copyButton = document.querySelector('.copy-clipboard');
copyButton.addEventListener('click', function() {
const textToCopy = copyButton.textContent.trim();
navigator.clipboard.writeText(textToCopy).then(function() {
copyButton.setAttribute('data-text', 'Copied!');
setTimeout(function() {
copyButton.setAttribute('data-text', 'Copy To Clipboard');
}, 3000); // Через 3 секунды вернуть значение 'Copy To Clipboard'
}).catch(function(err) {
console.error('Failed to copy: ', err);
});
}); Этот код добавит обработчик события клика на кнопку с классом `copy-clipboard`, скопирует текст кнопки в буфер обмена, изменит значение `data-text` на "Copied!", а затем через 500 миллисекунд вернет его обратно на "Copy To Clipboard".
2 способ
2 вариант создания кнопки копирования мало, чем отличается от первого способа. Это лишь модификация, которая поможет вебмастеру видоизменять HTML код на своё усмотрение.
Ознакомьтесь с примером:
Создайте любой элемент с классом сopy. Это могут быть теги span, p, button, div и другие:
- <span class="copy">Text To Copy Clipboard<span>
- <button class="copy">copy to clipboard</button>
Так же как и в первом случае, количество элементов с классом copy на странице может быть дюбым.
Скопируйте код JS:
>document.addEventListener('click', function(event) {
if (event.target.classList.contains('copy')) {
let textToCopy = event.target.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
event.target.innerHTML = '<span style="font-weight:600;color:red;">Copied!</span>';
setTimeout(() => {
event.target.textContent = textToCopy;
}, 500); // Можно изменить время через которое вернется исходный текст (в миллисекундах)
}).catch((err) => {
alert('Ошибка при копировании текста: ' + err);
});
}
}); 3 вариант: Копирование значения input при помощи execCommand("copy")
Немного отличается скрипт для копирования в буфер в том случае, когда текст отображен в элементах формы, таких как textarea или input.
.inputText { padding: 10px; border: 2px solid #757575; border-radius: 5px; margin-bottom: 5px; } .copyText { padding: 5px 20px; background-color: #3498DB; color: #fffefe; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; outline: none; } /* Применение стилей к элементам */ .inputText { width: 300px; /* Ширина для примера */ } button.copyText:hover { background-color: #2980B9; border:none; } button.copyText:active { background-color: #2980B9; border:none; outline: none; } button:focus { outline: none; }const inputTexts = document.querySelectorAll(".inputText"); const copyBtns = document.querySelectorAll(".copyText"); // Для каждой пары элементов создаем обработчик события copyBtns.forEach((btn, index) => { btn.onclick = () => { inputTexts[index].select(); document.execCommand("copy"); }; });
Скопируйте код HTML:
<input class="inputText" type="text" value="Некоторый текст или код"> <button class="copyText">Copy</button>
CSS код:
.inputText {
padding: 10px;
border: 2px solid #757575;
border-radius: 5px;
}
.copyText {
padding: 10px 20px;
background-color: #3498DB;
color: #fffefe;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
/* Применение стилей к элементам */
.inputText {
width: 200px; /* Ширина для примера */
}
.copyText:hover {
background-color: #2980B9;
}
.copyText:active {
background-color: #2980B9;
} Javacript код execCommand("copy") при одной паре input + button
const copyInput = document.querySelector(".inputText");
/* сохраняем кнопку в переменную btn */
const copyBtn = document.querySelector(".copyText");
/* вызываем функцию при нажатии на кнопку */
copyBtn.onclick = function() {
copyInput.select();
document.execCommand("copy");
} Javacript код execCommand("copy") при многочисленной вставки input + button
const inputTexts = document.querySelectorAll(".inputText");
const copyBtns = document.querySelectorAll(".copyText");
// Для каждой пары элементов создаем обработчик события
copyBtns.forEach((btn, index) => {
btn.onclick = () => {
inputTexts[index].select();
document.execCommand("copy");
};
}); Примечание: execCommand("copy") - это метод JavaScript, который используется для копирования содержимого в буфер обмена. Он позволяет копировать текстовое содержимое элемента или выделенного текста на веб-странице в буфер обмена пользователя. Однако, стоит отметить, что этот метод считается устаревшим и может не поддерживаться во всех браузерах. Вместо использования `execCommand("copy")` рекомендуется использовать более современные способы работы с буфером обмена, такие как Clipboard API (смотри первые 2 способа, приведенные в качестве примеров на этой странице).
