Hvordan kopierer jeg teksten i en div til udklipsholderen? Jeg har en div og skal tilføje et link, som vil tilføje teksten til udklipsholderen. Er der en løsning til dette?
<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>
Når jeg klikker på kopiere tekst, og derefter trykker jeg på Ctrl + V, skal den indsættes.
Der er en anden måde uden Flash (ud over Clipboard API, der er nævnt i jfriend00's svar). Du skal markere teksten og derefter udføre kommandoen copy
for at kopiere den tekst, der i øjeblikket er markeret på siden, til udklipsholderen.
Denne funktion vil f.eks. kopiere indholdet af det overgivne element til udklipsholderen (opdateret med forslag i kommentarerne fra PointZeroTwo):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Sådan fungerer det:
document.execCommand("copy")
.Du kan se en hurtig demo her:
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" />
Hovedproblemet er, at ikke alle browsere understøtter denne funktion i øjeblikket, men du kan bruge den på de vigtigste fra:
Opdatering 1: Dette kan også opnås med en ren JavaScript-løsning (ingen 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" />
Bemærk, at vi overfører id'et uden # nu.
Som madzohan rapporterede i kommentarerne nedenfor, er der i nogle tilfælde et eller andet mærkeligt problem med 64-bit versionen af Google Chrome (ved at køre filen lokalt). Dette problem ser ud til at være løst med den ikke-JQuery-løsning ovenfor.
Madzohan prøvede i Safari, og løsningen virkede, men ved at bruge document.execCommand('SelectAll')
i stedet for at bruge .select()
(som angivet i chatten og i kommentarerne nedenfor).
Som PointZeroTwo påpeger i kommentarerne, kunne koden forbedres, så den returnerer et resultat af succes/fejlslag. Du kan se en demo på [denne jsFiddle][7].
Som en bruger påpegede i den spanske version af StackOverflow, fungerer ovenstående løsninger perfekt, hvis du ønsker at kopiere indholdet af et element bogstaveligt, men de fungerer ikke så godt, hvis du ønsker at indsætte den kopierede tekst med format (da den kopieres ind i en input type="text"
, går formatet "tabt").
En løsning på det ville være at kopiere ind i en indholdsredigerbar div
og derefter kopiere den ved hjælp af execCommand
på en lignende måde. Her er der et eksempel - klik på knappen Kopier og indsæt derefter i det indholdsredigerbare felt nedenfor:
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>
Og i jQuery ville det være sådan her:
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>
Redigeret fra 2016
Fra 2016 kan du nu kopiere tekst til udklipsholderen i de fleste browsere, fordi de fleste browsere har mulighed for programmatisk at kopiere et udvalg af tekst til udklipsholderen ved hjælp af document.execCommand("copy")
, der fungerer ud fra et udvalg.
Som med nogle andre handlinger i en browser (f.eks. åbning af et nyt vindue) kan kopiering til udklipsholderen kun foretages via en specifik brugerhandling (f.eks. et museklik). Det kan f.eks. ikke gøres via en timer.
Her er et kodeeksempel:
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">
Her er en lidt mere avanceret demo:
Og du kan også få et præfabrikeret bibliotek, der gør dette for dig med clipboard.js.
Gammel, historisk del af svaret
Direkte kopiering til udklipsholderen via JavaScript er ikke tilladt i nogen moderne browser af sikkerhedshensyn. Den mest almindelige løsning er at bruge en Flash-funktion til kopiering til udklipsholderen, som kun kan udløses af et direkte klik fra brugeren.
Som allerede nævnt er ZeroClipboard et populært sæt kode til styring af Flash-objektet til at foretage kopieringen. Jeg har selv brugt det. Hvis Flash er installeret på browserenheden (hvilket udelukker mobil eller tablet), virker det.
Den næstmest almindelige work-around er blot at placere den udklipsholderbundne tekst i et indtastningsfelt, flytte fokus til dette felt og råde brugeren til at trykke Ctrl + C for at kopiere teksten.
Andre diskussioner af problemet og mulige løsninger kan findes i disse tidligere Stack Overflow-indlæg:
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
Disse spørgsmål, der spørger efter et moderne alternativ til Flash, har fået mange upvotes, men ingen svar med en løsning (sandsynligvis fordi der ikke findes nogen):
Internet Explorer og Firefox havde tidligere ikke-standardiserede API'er til at få adgang til udklipsholderen, men de nyere versioner har forældet disse metoder (sandsynligvis af sikkerhedshensyn).
Der er en begyndende standardiseringsindsats for at forsøge at finde en "sikker" måde at løse de mest almindelige problemer med udklipsholdere på (sandsynligvis kræver det en specifik brugerhandling, ligesom Flash-løsningen kræver), og det ser ud til, at den måske er delvist implementeret i de nyeste versioner af Firefox og Chrome, men jeg har ikke bekræftet det endnu.
Den tekst, der skal kopieres, er i tekstindtastning, som f.eks: Det er en tekstindtastning i teksten, som f.eks:Så det skal være sådan, at knappen skal være som: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>
Dit script skal være som:
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
For CDN-filer
note: filen skal ligge i samme mappe som din fil, der bruger denne funktionalitet, ELLER du skal inkludere, som vi inkluderer <script src="""></script>
på vores sider.