Klik på knappen kopiere til udklipsholder ved hjælp af jQuery

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:

  1. Opretter et midlertidigt skjult tekstfelt.
  2. Kopierer indholdet af elementet til dette tekstfelt.
  3. Vælger indholdet i tekstfeltet.
  4. Udfører kommandoen copy like: Kopieringskommandoen udføres som document.execCommand("copy").
  5. Fjerner det midlertidige tekstfelt.

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>
Copy P1
Copy P2
<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:

  • Chrome 43
  • Internet Explorer 10
  • Firefox 41
  • Safari 10

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>
Copy P1
Copy P2
<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].


OPDATERING: KOPI BEHOLDER TEKSTFORMATET

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">Bold text and underlined text.</p>
Copy Keeping Format 

<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">Bold text and underlined text.</p>
Copy Keeping Format 

<div id="target" contentEditable="true"></div>
Kommentarer (32)
Løsning

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"> Copy<br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Her er en lidt mere avanceret demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

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:


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.

Kommentarer (17)

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: Copy 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.

Kommentarer (1)