Comment copier le texte d'une div dans le presse-papiers? J'ai une div et dois ajouter un lien qui ajoutera le texte au presse-papiers. Y a-t-il une solution à cela?

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

Après avoir cliqué sur copier du texte, puis sur Ctrl+ V, il doit être collé.

Modifier à partir de 2016

À partir de 2016, vous pouvez désormais copier du texte dans le presse-papiers dans la plupart des navigateurs, car la plupart des navigateurs ont la possibilité de copier par programmation une sélection de texte dans le presse-papiers à l'aide de document.execCommand("copy")cette méthode .

Comme pour certaines autres actions dans un navigateur (comme l'ouverture d'une nouvelle fenêtre), la copie dans le presse-papiers ne peut être effectuée que via une action utilisateur spécifique (comme un clic de souris). Par exemple, cela ne peut pas être fait via une minuterie.

Voici un exemple de code:

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

Voici une démo un peu plus avancée: https://jsfiddle.net/jfriend00/v9g1x0o6/

Et, vous pouvez également obtenir une bibliothèque pré-construite qui le fait pour vous avec clipboard.js .

Partie ancienne et historique de la réponse

La copie directe dans le presse-papiers via JavaScript n'est autorisée par aucun navigateur moderne pour des raisons de sécurité. La solution de contournement la plus courante consiste à utiliser une fonction Flash pour copier dans le presse-papiers qui ne peut être déclenchée que par un clic direct de l'utilisateur.

Comme déjà mentionné, ZeroClipboard est un ensemble de code populaire pour gérer l'objet Flash pour effectuer la copie. Je l'ai utilisé. Si Flash est installé sur le dispositif de navigation (ce qui exclut le mobile ou la tablette), cela fonctionne.

La solution de contournement la plus courante suivante consiste simplement à placer le texte lié au presse-papiers dans un champ de saisie, à déplacer le focus sur ce champ et à conseiller à l'utilisateur d'appuyer sur Ctrl+ Cpour copier le texte.

D'autres discussions sur le problème et les solutions de contournement possibles peuvent être trouvées dans ces messages antérieurs de débordement de pile:

• Comment copier dans le presse-papiers en JavaScript?

• Comment copier du texte dans le presse-papiers du client à l'aide de jQuery?

• Comment pouvez-vous copier dans le presse-papiers sans Flash?

Ces questions demandant une alternative moderne à l'utilisation de Flash ont reçu beaucoup de votes positifs et aucune réponse avec une solution (probablement parce qu'aucune n'existe):

• Alternative HTML5 au ZeroClipboard basé sur flash pour une copie sécurisée des données dans le presse-papiers?

• Copier dans le presse-papiers sans Flash

Internet Explorer et Firefox possédaient auparavant des API non standard pour accéder au presse-papiers, mais leurs versions plus modernes ont déconseillé ces méthodes (probablement pour des raisons de sécurité).

Il existe un effort de normalisation naissant pour essayer de trouver un moyen "sûr" de résoudre les problèmes les plus courants du presse-papiers (nécessitant probablement une action spécifique de l'utilisateur comme la solution Flash l'exige), et il semble qu'il puisse être partiellement implémenté dans le dernier versions de Firefox et Chrome, mais je ne l'ai pas encore confirmé.

Mise à jour 2020 : cette solution utilise execCommand. Bien que cette fonctionnalité soit correcte au moment de la rédaction de cette réponse, elle est désormais considérée comme obsolète . Il fonctionnera toujours sur de nombreux navigateurs, mais son utilisation est déconseillée car le support peut être supprimé.

Il existe une autre méthode non Flash (en dehors de l' API Clipboard mentionnée dans la réponse de jfriend00 ). Vous devez sélectionner le texte, puis exécuter la commandecopy pour copier dans le presse-papiers le texte actuellement sélectionné sur la page.

Par exemple, cette fonction copiera le contenu de l'élément passé dans le presse-papiers (mis à jour avec suggestion dans les commentaires de PointZeroTwo ):

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

Voilà comment cela fonctionne:

1. Crée un champ de texte temporairement masqué.
2. Copie le contenu de l'élément dans ce champ de texte.
3. Sélectionne le contenu du champ de texte.
4. Exécute la copie de commande comme: document.execCommand("copy").
5. Supprime le champ de texte temporaire.

Vous pouvez voir une démo rapide ici:

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

Le problème principal est que tous les navigateurs ne prennent pas en charge cette fonctionnalité pour le moment, mais vous pouvez l'utiliser sur les principaux à partir de:

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

Mise à jour 1: Cela peut être réalisé également avec une solution JavaScript pure (pas de 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" />

Notez que nous transmettons l'id sans le # maintenant.

Comme madzohan l'a signalé dans les commentaires ci-dessous, il y a un problème étrange avec la version 64 bits de Google Chrome dans certains cas (en exécutant le fichier localement). Ce problème semble être résolu avec la solution non jQuery ci-dessus.

Madzohan a essayé dans Safari et la solution a fonctionné mais en utilisant document.execCommand('SelectAll')au lieu d'utiliser .select()(comme spécifié dans le chat et dans les commentaires ci-dessous).

Comme PointZeroTwo le souligne dans les commentaires , le code pourrait être amélioré afin de renvoyer un résultat de réussite / échec. Vous pouvez voir une démo sur ce jsFiddle .

MISE À JOUR: COPIE GARDANT LE FORMAT DE TEXTE

Comme un utilisateur l'a souligné dans la version espagnole de StackOverflow , les solutions répertoriées ci-dessus fonctionnent parfaitement si vous souhaitez copier le contenu d'un élément littéralement, mais elles ne fonctionnent pas si bien si vous souhaitez coller le texte copié au format (comme il est copié dans un input type="text", le format est "perdu").

Une solution pour cela serait de copier dans un contenu modifiable divpuis de le copier en utilisant le execCommandde la même manière. Voici un exemple - cliquez sur le bouton Copier puis collez-le dans la zone de contenu modifiable ci-dessous:

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>

Et dans jQuery, ce serait comme ça:

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>

clipboard.js est un bel utilitaire qui permet de copier du texte ou des données HTML dans le presse-papiers sans utiliser Flash. C'est très simple à utiliser; il suffit d'inclure le .js et d'utiliser quelque chose comme ceci:

<button id='markup-copy'>Copy Button</button>

<script>
    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup text. Paste me into a rich text editor.',
            'text/html': '<i>here</i> is some <b>rich text</b>'
        }).then(
            function(){console.log('success'); },
            function(err){console.log('failure', err);
        });
    });
</script>

clipboard.js est également sur GitHub .

Modifier le 15 janvier 2016: La réponse du haut a été modifiée aujourd'hui pour faire référence à la même API dans ma réponse publiée en août 2015. Le texte précédent demandait aux utilisateurs d'utiliser ZeroClipboard. Je veux juste être clair que je n'ai pas retiré cela de la réponse de jfriend00, plutôt l'inverse.

La simplicité est la sophistication ultime.
Si vous ne voulez pas que le texte à copier soit visible:

jQuery:

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML:

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />

Avec des sauts de ligne (Extension de la réponse d'Alvaro Montoro)

var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

Vous pouvez utiliser ce code pour copier la valeur d'entrée dans la page du Presse-papiers en cliquant sur un bouton

C'est Html

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

Ensuite, pour ce html, nous devons utiliser ce code JQuery

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

Ceci est la solution la plus simple pour cette question

Approche Mieux encore sans flash ou toute autre exigence est clipboard.js . Tout ce que vous avez à faire est d'ajouter data-clipboard-target="#toCopyElement"un bouton, de l'initialiser new Clipboard('.btn');et il copiera le contenu du DOM avec id toCopyElementdans le presse-papiers. Il s'agit d'un extrait qui copie le texte fourni dans votre question via un lien.

Cependant, il ne fonctionne pas en safari, mais il fonctionne sur tous les autres navigateurs, y compris les navigateurs mobiles, car il n'utilise pas de flash.

$(function(){
  new Clipboard('.copy-text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="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" data-clipboard-target="#content" href="#">copy Text</a>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

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

Il est très important que le champ de saisie n'en ait pas display: none. Le navigateur ne sélectionnera pas le texte et ne sera donc pas copié. Utilisez opacity: 0avec une largeur de 0px pour résoudre le problème.

C'est une méthode la plus simple pour copier le contenu

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

Solution jQuery simple.

Doit être déclenché par le clic de l'utilisateur.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

vous pouvez simplement utiliser cette bibliothèque pour réaliser facilement l'objectif de copie!

https://clipboardjs.com/

La copie de texte dans le presse-papiers ne devrait pas être difficile. Il ne devrait pas nécessiter des dizaines d'étapes pour configurer ou des centaines de Ko à charger. Mais surtout, cela ne devrait pas dépendre de Flash ou d'un framework gonflé.

C'est pourquoi clipboard.js existe.

ou

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

La bibliothèque ZeroClipboard offre un moyen simple de copier du texte dans le presse-papiers à l'aide d'un film Adobe Flash invisible et d'une interface JavaScript.

Le texte à copier est en entrée de texte, comme: <input type="text" id="copyText" name="copyText"> et, lorsque vous cliquez sur le bouton ci-dessus, le texte doit être copié dans le presse-papiers, donc le bouton est comme: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Votre script doit être comme:

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

</script>

Pour les fichiers CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

Remarque : ZeroClipboard.swfet ZeroClipboard.js"le fichier doit être dans le même dossier que votre fichier en utilisant cette fonctionnalité, OU vous devez l'inclure comme nous l'incluons <script src=""></script>sur nos pages.

La plupart des réponses proposées créent un ou plusieurs éléments d'entrée cachés temporaires supplémentaires. Étant donné que la plupart des navigateurs prennent actuellement en charge la modification du contenu div, je propose une solution qui ne crée pas d'élément (s) caché (s), préserve la mise en forme du texte et utilise la bibliothèque JavaScript ou jQuery pure.

Voici une implémentation squelette minimaliste utilisant le moins de lignes de codes possibles:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

La bibliothèque Clipboard-polyfill est une polyfill pour l'API de presse-papiers asynchrone moderne basée sur Promise.

installer dans CLI:

npm install clipboard-polyfill 

importer en tant que presse-papiers dans le fichier JS

window.clipboard = require('clipboard-polyfill');

exemple

Je l'utilise en bundle avec require("babel-polyfill");et l' ai testé sur du chrome 67. Tout est bon pour la production.

code html ici

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

CODE JS:

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // 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);
                    }

vous pouvez copier un texte individuel en dehors du texte d'un élément HTML.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

Pure JS, sans onclick en ligne, pour les classes jumelées "contenu - bouton de copie". Serait plus confortable, si vous avez de nombreux éléments)

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Prise en charge d'un navigateur plus ancien:

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Les deux fonctionnent comme un charme :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

Aussi en html,

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard