Klik op de knop te kopiëren naar klembord met behulp van jQuery

Hoe kopieer ik de tekst in een div naar het klembord? Ik heb een div en moet een link toevoegen die de tekst naar het klembord kopieert. Is hier een oplossing voor?

<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>

Nadat ik op copy text heb geklikt en vervolgens op Ctrl + V heb gedrukt, moet het geplakt worden.

Er is een andere niet-Flash manier (afgezien van de Clipboard API genoemd in jfriend00's antwoord). U moet de tekst selecteren en dan het commando copy uitvoeren om naar het klembord te kopiëren welke tekst op dat moment op de pagina is geselecteerd.

Bijvoorbeeld, deze functie zal de inhoud van het doorgegeven element naar het klembord kopiëren (bijgewerkt met suggestie in de commentaren van PointZeroTwo):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Dit is hoe het werkt:

  1. Maakt een tijdelijk verborgen tekstveld aan.
  2. Kopieert de inhoud van het element naar dat tekstveld.
  3. Selecteert de inhoud van het tekstveld.
  4. Voert het commando kopiëren uit als: document.execCommand("copy").
  5. Verwijdert het tijdelijke tekstveld.

Een snelle demo kunt u hier zien:

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" />

Het belangrijkste probleem is dat niet alle browsers ondersteunen deze functie op dit moment, maar je kunt het gebruiken op de belangrijkste uit:

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

Update 1: Dit kan ook bereikt worden met een pure JavaScript oplossing (geen 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" />

Merk op dat we nu de id doorgeven zonder de #.

Zoals madzohan gemeld in de opmerkingen hieronder, is er een aantal vreemde probleem met de 64-bits versie van Google Chrome in sommige gevallen (het uitvoeren van het bestand lokaal). Dit probleem lijkt te zijn opgelost met de niet-jQuery oplossing hierboven.

Madzohan probeerde het in Safari en de oplossing werkte, maar met document.execCommand('SelectAll') in plaats van met .select() (zoals aangegeven in de chat en in de opmerkingen hieronder).

Zoals PointZeroTwo in de commentaren opmerkt, kan de code verbeterd worden zodat het een succes/falen resultaat zou teruggeven. Je kunt een demo zien op [deze jsFiddle][7].


UPDATE: KOPIE MET BEHOUD VAN DE TEKSTOPMAAK

Zoals een gebruiker in de Spaanse versie van StackOverflow opmerkte, werken de hierboven genoemde oplossingen perfect als je de inhoud van een element letterlijk wilt kopiëren, maar ze werken niet'geweldig als je de gekopieerde tekst met opmaak wilt plakken (omdat het in een input type="text" wordt gekopieerd, gaat de opmaak "verloren").

Een oplossing hiervoor zou zijn om te kopiëren naar een inhoud bewerkbare div en dan te kopiëren met behulp van de execCommand op een vergelijkbare manier. Hier is een voorbeeld - klik op de kopieer knop en plak dan in het inhoud bewerkbare vak hieronder:

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>

En in jQuery, zou het als volgt zijn:

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>
Commentaren (32)
Oplossing

Uitgave vanaf 2016

Vanaf 2016 kunt u nu in de meeste browsers tekst naar het klembord kopiëren omdat de meeste browsers de mogelijkheid hebben om programmatisch een selectie tekst naar het klembord te kopiëren met document.execCommand("copy") dat van een selectie werkt.

Net als met sommige andere acties in een browser (zoals het openen van een nieuw venster), kan het kopiëren naar het klembord alleen worden gedaan via een specifieke gebruikersactie (zoals een muisklik). Het kan bijvoorbeeld niet via een timer worden gedaan.

Hier's een code voorbeeld:

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">

Hier's een iets meer geavanceerde demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

En, je kunt ook een vooraf gebouwde bibliotheek krijgen die dit voor je doet met clipboard.js.


Old, historisch deel van antwoord

Rechtstreeks naar het klembord kopiëren via JavaScript wordt door geen enkele moderne browser toegestaan om veiligheidsredenen. De meest gebruikelijke workaround is het gebruik van een Flash-mogelijkheid voor het kopiëren naar het klembord die alleen kan worden geactiveerd door een directe klik van de gebruiker.

Zoals reeds vermeld, ZeroClipboard is een populaire set code voor het beheren van het Flash object om het kopiëren te doen. Ik'heb het gebruikt. Als Flash is geïnstalleerd op het browse-apparaat (wat mobiel of tablet uitsluit), werkt het.


De volgende meest voorkomende work-around is om gewoon de klembord-gebonden tekst in een invoerveld te plaatsen, de focus naar dat veld te verplaatsen en de gebruiker te adviseren om op Ctrl + C te drukken om de tekst te kopiëren.

Andere discussies over het probleem en mogelijke work-arounds zijn te vinden in deze eerdere Stack Overflow posts:

Hoe kun je naar klembord kopiëren zonder Flash?


Deze vragen die vragen om een modern alternatief voor het gebruik van Flash hebben veel vraag upvotes gekregen en geen antwoorden met een oplossing (waarschijnlijk omdat er geen bestaan):


Internet Explorer en Firefox hadden vroeger niet-standaard API's voor toegang tot het klembord, maar de modernere versies hebben deze methoden (waarschijnlijk om veiligheidsredenen) afgeschreven.


Er is een ontluikende poging tot standaarden om te proberen met een "safe" manier te komen om de meest voorkomende klembord problemen op te lossen (die waarschijnlijk een specifieke gebruikersactie vereist zoals de Flash-oplossing vereist), en het lijkt erop dat het gedeeltelijk geïmplementeerd kan zijn in de nieuwste versies van Firefox en Chrome, maar ik heb dat nog niet bevestigd.

Commentaren (17)

De tekst die gekopieerd moet worden staat in de tekst invoer, zoals: <input type="text" id="copyText" name="copyText"> en, op knop klikken bovenstaande tekst moet gekopieerd worden naar clipboard,dus knop is als:Copy Je script zou er zo uit moeten zien:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

Voor CDN-bestanden

note: ZeroClipboard.swf en ZeroClipboard.js" bestand moet in dezelfde map staan als je bestand dat deze functionaliteit gebruikt, OF je moet zoals wij <script src=""></script> includen op onze pagina's.

Commentaren (1)