Как да копирам текста в div в клипборда? Имам div и трябва да добавя връзка, която ще добави текста в клипборда. Има ли решение за това?
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
След като щракна върху копиране на текст, след което натисна Ctrl + V, той трябва да бъде вмъкнат.
Има и друг начин, който не е свързан с Flash (освен споменатия в отговора на jfriend00's Clipboard API). Трябва да маркирате текста и след това да изпълните командата 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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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 без #.
Както съобщи madzohan в коментарите по-долу, в някои случаи има някакъв странен проблем с 64-битовата версия на Google Chrome (при локално стартиране на файла). Изглежда, че този проблем е отстранен с решението без JQuery по-горе.
Мадзохан опита в Safari и решението проработи, но с използване на document.execCommand('SelectAll')
вместо с .select()
(както е посочено в чата и в коментарите по-долу).
Както посочва PointZeroTwo в коментарите, кодът може да бъде подобрен, така че да връща резултат за успех/неуспех. Можете да видите демонстрация на [този jsFiddle][7].
Както отбеляза потребител в испанската версия на 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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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>
От 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">
Ето една малко по-усъвършенствана демонстрация:
Можете също така да получите предварително създадена библиотека, която прави това вместо вас, с clipboard.js.
Стара, историческа част от отговора
Директното копиране в клипборда чрез JavaScript не е разрешено от нито един съвременен браузър от съображения за сигурност. Най-често срещаният начин за заобикаляне на проблема е използването на Flash възможност за копиране в клипборда, която може да бъде задействана само чрез директно щракване от потребителя.
Както вече беше споменато, ZeroClipboard е популярен набор от код за управление на Flash обекта за извършване на копирането. Аз съм го използвал. Ако Flash е инсталиран на устройството за сърфиране (което изключва мобилен телефон или таблет), той работи.
Следващият най-често срещан начин за заобикаляне на проблема е просто да поставите свързания с клипборда текст в поле за въвеждане, да преместите фокуса върху това поле и да посъветвате потребителя да натисне Ctrl + C, за да копира текста.
Други обсъждания на проблема и възможни начини за заобикаляне на проблема можете да намерите в тези предишни публикации в Stack Overflow:
https://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript
https://stackoverflow.com/questions/1539641/how-to-copy-text-to-the-clients-clipboard-using-jquery
Тези въпроси, в които се иска съвременна алтернатива на използването на Flash, получиха много гласове за въпроси и нито един отговор с решение (вероятно защото такова не съществува):
Internet Explorer и Firefox са имали нестандартни API за достъп до клипборда, но в по-модерните им версии тези методи са отпаднали (вероятно от съображения за сигурност).
Съществува зараждащо се усилие за създаване на стандарти, което се опитва да измисли "безопасен" начин за решаване на най-често срещаните проблеми с клипборда (вероятно изискващ специфично действие от страна на потребителя, както изисква решението за Flash), и изглежда, че може да е частично реализиран в последните версии на Firefox и Chrome, но все още не съм потвърдил това.
Текстът за копиране е в текстовия вход, например: <input type="text" id="copyText" name="copyText">
и, при натискане на бутона по-горе текстът трябва да се копира в клипборда, така че бутонът е като:<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>
Вашият скрипт трябва да е като:
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
За CDN файлове
бележка: Файлът ZeroClipboard.swf
и ZeroClipboard.js
" трябва да е в същата папка, в която е вашият файл, използващ тази функционалност, ИЛИ трябва да включите, както ние включваме <script src=""></script>
на нашите страници.