Как скопировать текст внутри div в буфер обмена? У меня есть div и вам нужно добавить ссылку, которая добавит текст в буфер обмена. Есть ли решение для этого?
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
После того, как я нажимаю копию текста, я нажимаю Ctrl + V, он должен быть вставлен.
Изменить с 2016 года
По состоянию на 2016 год вы можете копировать текст в буфер обмена в большинстве браузеров, потому что большинство браузеров имеют возможность программно копировать текст в буфер обмена, используя document.execCommand("copy")
, который работает с выбором.
Как и некоторые другие действия в браузере (например, открытие нового окна), копирование в буфер обмена может выполняться только с помощью определенного действия пользователя (например, щелчка мыши). Например, это невозможно сделать с помощью таймера.
Вот пример кода:
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
input {
width: 400px;
}
<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">
Вот немного более продвинутая демо: https://jsfiddle.net/jfriend00/v9g1x0o6/
И вы также можете получить предварительно созданную библиотеку, которая сделает это для вас с clipboard.js.
Старая, историческая часть ответа
Непосредственное копирование в буфер обмена с помощью JavaScript не разрешено никаким современным браузером по соображениям безопасности. Наиболее распространенным решением является использование возможности Flash для копирования в буфер обмена, который может быть вызван только прямым щелчком пользователя.
Как уже упоминалось, ZeroClipboard является популярным набором кода для управления объектом Flash для копирования. Я использовал его. Если Flash установлен на устройстве просмотра (который запрещает использование мобильного телефона или планшета), он работает.
Следующим наиболее распространенным видом работы является просто поместить текст, привязанный к буферу, в поле ввода, переместить фокус в это поле и посоветовать пользователю нажать Ctrl + C, чтобы скопировать текст.
Другие обсуждения проблемы и возможные обходы можно найти в этих предыдущих сообщениях:
Эти вопросы, предлагающие современную альтернативу использованию Flash, получили много вопросов upvotes и ответов на решение (возможно, потому что их нет):
Internet Explorer и Firefox использовали нестандартные API для доступа к буферу, но их более современные версии не рекомендовали эти методы (возможно, из соображений безопасности).
Существует зарождающиеся усилия по стандартизации, чтобы попытаться найти "безопасный" способ решения наиболее распространенных проблем с буфер обмена (возможно, требуя как это требует Flash-решение), и похоже, что это может быть частично реализовано в последних версиях Firefox и Chrome, но я еще не подтвердил это.
Существует еще один способ, отличный от Flash (кроме API буфера обмена, упомянутый в jfriend00 answer). Вам нужно выбрать текст, а затем выполнить команду copy
, чтобы скопировать в буфер обмена любой текст, выбранный в данный момент на странице.
Например, эта функция скопирует содержимое переданного элемента в буфер обмена (обновляется с предложением в комментариях PointZeroTwo):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Вот как это работает:
document.execCommand("copy")
.Здесь вы можете увидеть краткую демонстрацию:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Основная проблема заключается в том, что не все браузеры поддерживают эту функцию на данный момент, но вы можете использовать ее на основных из:
Обновление 1: Это может быть достигнуто также с помощью чистого JavaScript-решения (без jQuery):
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Обратите внимание, что мы передаем id без # now.
Как madzohan сообщается в комментариях ниже, в некоторых случаях возникает некоторая странная проблема с 64-разрядной версией Google Chrome (запуск локального файла), Эта проблема, похоже, исправлена с помощью решения, отличного от jQuery выше.
Madzohan попробовал в Safari, и решение работало, но используя document.execCommand('SelectAll')
вместо использования .select()
(как указано в чате и в комментариях ниже).
Как PointZeroTwo указывает на комментарии, код может быть улучшен, чтобы он возвращал результат успеха/сбоя. Вы можете увидеть демо на этот jsFiddle.
Как отметил пользователь в испанской версии StackOverflow, перечисленные выше решения работают отлично, если вы хотите скопировать содержимое элемента буквально, но они не Если вы хотите вставить скопированный текст в формате (поскольку он скопирован в input type="text"
, формат "потерян" ).
Решением для этого было бы скопировать в редактируемый контент div
, а затем скопировать его с помощью execCommand
аналогичным образом. Вот пример: нажмите кнопку копирования, а затем вставьте в поле редактирования контента ниже:
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
И в jQuery это будет так:
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null) })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
clipboard.js - хорошая утилита, которая позволяет копировать текстовые или HTML-данные в буфер обмена без использования Flash. Это очень легко использовать; просто включите.js и используйте что-то вроде этого:
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js также есть на GitHub.
Изменение от 15 января 2016 года. Верхний ответ был отредактирован сегодня для ссылки на тот же API в моем ответе, опубликованном в августе 2015 года. Предыдущий текст инструктировал пользователей использовать ZeroClipboard. Просто хочу прояснить, что я не выдернул это из ответа jfriend00, а наоборот.
С разрывами строк (Расширение ответа от Альваро Монторо)
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
Даже лучший подход без вспышки или других требований - clipboard.js. Все, что вам нужно сделать, это добавить data-clipboard-target="#toCopyElement"
на любую кнопку, инициализировать ее new Clipboard('.btn');
и скопировать содержимое DOM с идентификатором toCopyElement
в буфер обмена. Это фрагмент, который копирует текст, указанный в вашем вопросе, по ссылке.
Одно из ограничений заключается в том, что он не работает на сафари, но он работает во всех других браузерах, включая мобильные браузеры, поскольку он не использует flash
$(function(){
new Clipboard('.copy-text');
});
<script src="/jquery.min.js"></script>
<script src="/clipboard.min.js"></script>
<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s</p>
<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>
Простота есть основа утонченности.
Если вы не хотите, чтобы текст должен быть видимым:
JQuery:
$('button.copyButton').click(function(){
$(this).siblings('input.linkToCopy').select();
document.execCommand("copy");
});
HTML:
<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;"><input>
<div class="form-group">
<label class="font-normal MyText">MyText to copy</label>
<button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>
$(".btnCopy").click(function () {
var element = $(this).attr("data");
copyToClipboard($('.' + element));
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
.addClass("hidden")
в <input>
чтобы он никогда не отображался в браузере?
Это самый простой способ скопировать содержимое
<div id="content"> Lorepm ispum </div>
<button class="copy" title="content">Copy Sorce</button>
function SelectContent(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('Copy');
}
$(".copy").click(function(){
SelectContent( $(this).attr('title'));
});
вы можете просто использовать эту библиотеку для простоты реализации цели копирования!
Копирование текста в буфер обмена не должно быть трудным. Он не должен требовать десятки шагов для настройки или сотни KB для загрузки. Но большая часть все это не должно зависеть от Flash или раздутой структуры.
Вот почему clipboard.js существует.
или
https://github.com/zeroclipboard/zeroclipboard
Библиотека ZeroClipboard предоставляет простой способ скопировать текст в буфер обмена с использованием невидимого фильма Adobe Flash и JavaScript интерфейс.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/index.css" rel="stylesheet" />
<script src="/jquery-2.1.4.min.js"></script>
<script>
function copy()
{
try
{
$('#txt').select();
document.execCommand('copy');
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<h4 align="center">Copy your code</h4>
<textarea id="txt" style="width:100%;height:300px;"></textarea>
<br /><br /><br />
<div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>
Текст для копирования находится в текстовом вводе, например: <input type="text" id="copyText" name="copyText">
и, при нажатии кнопки над текстом следует скопировать в буфер обмена, поэтому кнопка выглядит следующим образом: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>
Ваш script должен выглядеть следующим образом:
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
Для CDN файлов
note: ZeroClipboard.swf
и ZeroClipboard.js
"файл должен находиться в той же папке, что и ваш файл с использованием этой функции, или вы должны включить, например, включить <script src=""></script>
на наши страницы.
Библиотека Clipboard-polyfill - это полипол для современного асинхронного API буфера обмена на основе Promise.
установить в CLI:
npm install clipboard-polyfill
импортировать в буфер обмена в файл JS
window.clipboard = require('clipboard-polyfill');
Я использую его в комплекте с require("babel-polyfill");
и проверил его на хроме 67. Все хорошо для производства.
Оба будут работать как шарм :),
JAVASCRIPT:
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("text copied")
}}
Также в html,
<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<div id="div1" >Text To Copy </div>
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>
Большинство предложенных ответов создают дополнительный временный скрытый элемент ввода. Поскольку большинство браузеров в настоящее время поддерживают редактирование содержимого div, я предлагаю решение, которое не создает скрытые элементы, сохраняет форматирование текста и использует чистую библиотеку JavaScript или jQuery.
Вот минимальная реализация скелета, использующая наименьшее количество кодов, о которых я мог бы подумать:
//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
copyUsingPureJS(document.getElementById("copyTarget"));
alert("Text Copied to Clipboard Using Pure Javascript");
});
function copyUsingPureJS(element_id) {
element_id.setAttribute("contentEditable", true);
element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
element_id.focus();
document.execCommand("copy");
element_id.removeAttribute("contentEditable");
}
//Jquery:
$(document).ready(function() {
$("#copyUsingJquery").click(function() {
copyUsingJquery("#copyTarget");
});
function copyUsingJquery(element_id) {
$(element_id).attr("contenteditable", true)
.select()
.on("focus", function() {
document.execCommand('selectAll', false, null)
})
.focus()
document.execCommand("Copy");
$(element_id).removeAttr("contenteditable");
alert("Text Copied to Clipboard Using jQuery");
}
});
#copyTarget {
width: 400px;
height: 400px;
border: 1px groove gray;
color: navy;
text-align: center;
box-shadow: 0 4px 8px 0 gray;
}
#copyTarget h1 {
color: blue;
}
#copyTarget h2 {
color: red;
}
#copyTarget h3 {
color: green;
}
#copyTarget h4 {
color: cyan;
}
#copyTarget h5 {
color: brown;
}
#copyTarget h6 {
color: teal;
}
#pasteTarget {
width: 400px;
height: 400px;
border: 1px inset skyblue;
}
<script src="/jquery.min.js"></script>
<div id="copyTarget">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<strong>Preserve <em>formatting</em></strong>
<br/>
</div>
<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>
Простое решение jQuery.
Должно быть вызвано щелчком пользователя.
$("<textarea/>").appendTo("body").val(text).select().each(function () {
document.execCommand('copy');
}).remove();
html код здесь
<input id="result" style="width:300px"/>some example text
<button onclick="copyToClipboard('result')">Copy P1</button>
<input type="text" style="width:400px" placeholder="Paste here for test" />
JS CODE:
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).value);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
Очень важно, чтобы в поле ввода не display: none
. Браузер не будет выделять текст и, следовательно, не будет скопирован. Используйте opacity: 0
с шириной 0px, чтобы решить проблему.
Оба будут работать как шарм :),
JAVASCRIPT:
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("text copied")
}}
Также в html,
<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<div id="div1" >Text To Copy </div>
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>