Эта статья научит вас, как реализовать функциональность копирования с помощью JavaScript.
Способ 1: использование простого кода JavaScript
Мы можем использоватьClipboard.writeText()илиClipboard.write()метод Clipboard API, чтобы перезаписать содержимое буфера обмена указанными данными.
Пример
function myFunction() {
/* Получить текстовое содержимое */
var copyText = document.getElementById("myInput");
/* Выделить и скопировать содержимое */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Настройки для мобильных устройств */
/* Копировать содержимое в текстовую область */
navigator.clipboard.writeText(copyText.value);
/* Показать скопированное содержимое */
alert("Скопированный текст: " + copyText.value);
}
/* Получить текстовое содержимое */
var copyText = document.getElementById("myInput");
/* Выделить и скопировать содержимое */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Настройки для мобильных устройств */
/* Копировать содержимое в текстовую область */
navigator.clipboard.writeText(copyText.value);
/* Показать скопированное содержимое */
alert("Скопированный текст: " + copyText.value);
}
Попробуйте сами »
После завершения копирования можно использовать более удобный способ уведомления:
Пример
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Скопированное содержимое: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Нажмите кнопку, чтобы скопировать";
}
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Скопированное содержимое: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Нажмите кнопку, чтобы скопировать";
}
Попробуйте сами »
Способ 2: Использование сторонней библиотеки clipboard.js (рекомендуется, высокая совместимость)
-
Официальный сайт clipboard.js:https://clipboardjs.com/
clipboard.js на GitHub：https://github.com/zenorocha/clipboard.js
Мы можем скачать clipboard.js и включить его в проект:
<script src="dist/clipboard.min.js.html"></script>
Конечно, ещё более простой способ — напрямую использовать отечественную CDN-библиотеку:
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
Пример
new ClipboardJS('#copyInput', {
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("Копирование успешно!!!");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("Копирование успешно!!!");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
Попробуйте сами »
Поддержка браузеров clipboard.js
