Jak skopiować tekst wewnątrz div do schowka? Mam div i muszę dodać link, który doda tekst do schowka. Czy istnieje na to jakieś rozwiązanie?
<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>
Po kliknięciu kopiuj tekst, następnie naciskam Ctrl + V, musi on zostać wklejony.
Jest jeszcze jeden sposób nie-Flashowy (oprócz API schowka wspomnianego w jfriend00's answer). Musisz zaznaczyć tekst, a następnie wykonać polecenie copy
, aby skopiować do schowka dowolny tekst aktualnie zaznaczony na stronie.
Na przykład, ta funkcja skopiuje zawartość przekazanego elementu do schowka (zaktualizowane z sugestią w komentarzach od PointZeroTwo):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Oto jak to działa:
document.execCommand("copy")
.Możesz zobaczyć szybkie demo tutaj:
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" />
Głównym problemem jest to, że nie wszystkie przeglądarki obsługują tę funkcję w tej chwili, ale możesz jej użyć na głównych z nich:
Aktualizacja 1: Można to również osiągnąć za pomocą czystego rozwiązania JavaScript (bez 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" />
Zauważ, że teraz przekazujemy id bez znaku #.
Jak madzohan zgłosił w komentarzach poniżej, istnieje jakiś dziwny problem z 64-bitową wersją Google Chrome w niektórych przypadkach (uruchamiając plik lokalnie). Ten problem wydaje się być naprawiony przy użyciu powyższego rozwiązania bez jQuery.
Madzohan próbował w Safari i rozwiązanie działało, ale używając document.execCommand('SelectAll')
zamiast używać .select()
(jak podano na czacie i w komentarzach poniżej).
Jak zauważył PointZeroTwo w komentarzach, kod mógłby zostać ulepszony tak, aby zwracał wynik sukces/porażka. Możesz zobaczyć demo na [tym jsFiddle][7].
Jak zauważył użytkownik w hiszpańskiej wersji StackOverflow, rozwiązania wymienione powyżej działają doskonale, jeśli chcesz skopiować zawartość elementu dosłownie, ale nie działają tak dobrze, jeśli chcesz wkleić skopiowany tekst z formatem (ponieważ jest on kopiowany do input type="text"
, format jest "tracony").
Rozwiązaniem byłoby skopiowanie do zawartości edytowalnej div
a następnie skopiowanie jej przy użyciu execCommand
w podobny sposób. Tutaj jest przykład - kliknij na przycisk kopiuj, a następnie wklej do edytowalnego pola zawartości poniżej:
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>
A w jQuery byłoby to tak:
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>
Edycja od 2016
Od 2016 roku można teraz kopiować tekst do schowka w większości przeglądarek, ponieważ większość przeglądarek ma możliwość programowego kopiowania zaznaczenia tekstu do schowka za pomocą document.execCommand("copy")
, który działa poza zaznaczeniem.
Podobnie jak w przypadku niektórych innych działań w przeglądarce (jak otwieranie nowego okna), kopiowanie do schowka może być wykonane tylko przez określone działanie użytkownika (jak kliknięcie myszą). Na przykład, nie można tego zrobić za pomocą timera.
Oto przykład kodu:
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">
Tutaj'jest nieco bardziej zaawansowane demo:
Możesz również uzyskać wstępnie zbudowaną bibliotekę, która zrobi to za Ciebie za pomocą clipboard.js.
Stara, historyczna część odpowiedzi
Bezpośrednie kopiowanie do schowka za pomocą JavaScript nie jest dozwolone przez żadną nowoczesną przeglądarkę ze względów bezpieczeństwa. Najczęstszym obejściem jest użycie funkcji Flash do kopiowania do schowka, która może być wywołana tylko przez bezpośrednie kliknięcie użytkownika.
Jak już wspomniano, ZeroClipboard jest popularnym zestawem kodu do zarządzania obiektem Flasha w celu wykonania kopii. Ja'e go używam. Jeśli Flash jest zainstalowany na urządzeniu przeglądającym (co wyklucza urządzenia mobilne lub tablety), to działa.
Kolejnym najczęstszym obejściem jest po prostu umieszczenie tekstu związanego ze schowkiem w polu wprowadzania, przeniesienie fokusu na to pole i poinformowanie użytkownika, aby nacisnął Ctrl + C, aby skopiować tekst.
Inne dyskusje na temat tego problemu i możliwych obejść można znaleźć w tych wcześniejszych postach 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
Te pytania z prośbą o nowoczesną alternatywę dla używania Flasha otrzymały wiele upvotes pytań i żadnych odpowiedzi z rozwiązaniem (prawdopodobnie dlatego, że żadne nie istnieje):
Internet Explorer i Firefox miały kiedyś niestandardowe API dostępu do schowka, ale ich nowocześniejsze wersje zdeprecjonowały te metody (prawdopodobnie ze względów bezpieczeństwa).
Istnieje rodzący się wysiłek na rzecz standardów, aby spróbować wymyślić "bezpieczny" sposób na rozwiązanie najczęstszych problemów ze schowkiem (prawdopodobnie wymagający określonego działania użytkownika, takiego jak wymaga rozwiązanie Flasha) i wygląda na to, że może być częściowo zaimplementowany w najnowszych wersjach Firefoksa i Chrome, ale jeszcze tego nie potwierdziłem.
Tekst do skopiowania jest w wejściu tekstowym, jak: <input type="text" id="copyText" name="copyText">
oraz, na kliknięcie przycisku powyższy tekst powinien zostać skopiowany do schowka, więc przycisk jest taki jak:<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>
Twój skrypt powinien wyglądać tak:
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
Dla plików CDN
note: pliki ZeroClipboard.swf
i ZeroClipboard.js
" powinny znajdować się w tym samym folderze, w którym znajduje się twój plik wykorzystujący tę funkcjonalność, LUB musisz dołączyć tak jak my dołączamy <script src=""></script>
na naszych stronach.