Jak skopiować tekst do div do schowka? Mam div i muszę dodać link, który doda tekst do schowka. Czy jest 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 skopiuj tekst, a następnie naciśnij Ctrl+ V, należy go wkleić.

Edytuj od 2016 r

Począwszy od 2016 r. Możesz 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 przy użyciu document.execCommand("copy")tej opcji.

Podobnie jak w przypadku niektórych innych akcji w przeglądarce (takich jak otwarcie nowego okna), kopiowanie do schowka można wykonać tylko poprzez określoną akcję użytkownika (np. 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">

Oto trochę bardziej zaawansowane demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

Możesz także uzyskać gotową bibliotekę, która zrobi to za Ciebie w clipboard.js .

Stara, historyczna część odpowiedzi

Ze względów bezpieczeństwa żadna nowoczesna przeglądarka nie zezwala na bezpośrednie kopiowanie do schowka za pomocą JavaScript. Najczęstszym obejściem jest użycie funkcji Flash do kopiowania do schowka, którą można uruchomić tylko przez bezpośrednie kliknięcie użytkownika.

Jak już wspomniano, ZeroClipboard jest popularnym zestawem kodu do zarządzania obiektem Flash w celu wykonania kopii. Użyłem tego. Jeśli Flash jest zainstalowany na urządzeniu przeglądającym (co wyklucza telefon komórkowy lub tablet), działa.

Kolejnym najczęściej stosowanym obejściem jest po prostu umieszczenie tekstu związanego ze schowkiem w polu wejściowym, przeniesienie fokusa do tego pola i zalecenie użytkownikowi naciśnięcia Ctrl+, Caby skopiować tekst.

Inne dyskusje na temat problemu i możliwe obejścia można znaleźć we wcześniejszych postach przepełnienia stosu:

• Jak skopiować do schowka w JavaScript?

• Jak skopiować tekst do schowka klienta za pomocą jQuery?

• Jak skopiować do schowka bez Flasha?

Te pytania dotyczące nowoczesnej alternatywy dla korzystania z Flasha otrzymały wiele pozytywnych opinii i brak odpowiedzi na rozwiązanie (prawdopodobnie dlatego, że nie istnieje):

• Alternatywa HTML5 dla ZeroClipboard opartej na Flashie do bezpiecznego kopiowania danych do schowka?

• Skopiuj do schowka bez Flasha

Internet Explorer i Firefox miały niestandardowe interfejsy API do uzyskiwania dostępu do schowka, ale ich nowocześniejsze wersje przestały używać tych metod (prawdopodobnie ze względów bezpieczeństwa).

Pojawiają się nowe standardy próbujące znaleźć „bezpieczny” sposób rozwiązania najczęstszych problemów ze schowkiem (prawdopodobnie wymagający określonej akcji użytkownika, takiej jak wymaga rozwiązanie Flash), i wygląda na to, że może być częściowo wdrożony w najnowszej wersji wersje Firefox i Chrome, ale jeszcze tego nie potwierdziłem.

Aktualizacja 2020 : wykorzystuje to rozwiązanie execCommand. Chociaż ta funkcja była odpowiednia w momencie pisania tej odpowiedzi, jest obecnie uważana za przestarzałą . Nadal będzie działać na wielu przeglądarkach, ale jego użycie jest odradzane, ponieważ wsparcie może zostać odrzucone.

Istnieje inny sposób inny niż Flash (oprócz Clipboard API wymienionego w odpowiedzi jfriend00 ). Musisz zaznaczyć tekst, a następnie wykonać polecenie,copy aby skopiować do schowka dowolny tekst zaznaczony na stronie.

Na przykład ta funkcja skopiuje zawartość przekazanego elementu do schowka (zaktualizowana sugestią w komentarzach PointZeroTwo ):

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

Tak to działa:

1. Tworzy tymczasowo ukryte pole tekstowe.
2. Kopiuje zawartość elementu do tego pola tekstowego.
3. Wybiera zawartość pola tekstowego.
4. Wykonuje kopię polecenia jak: document.execCommand("copy").
5. Usuwa tymczasowe pole tekstowe.

Tutaj możesz zobaczyć szybkie demo:

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łówny problem polega na tym, że nie wszystkie przeglądarki obsługują obecnie tę funkcję, ale można jej używać w głównych z:

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

Aktualizacja 1: Można to osiągnąć również dzięki czystemu rozwiązaniu 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 przekazujemy identyfikator bez numeru # teraz.

Jak poinformował madzohan w komentarzach poniżej, w niektórych przypadkach występuje 64-bitowy problem z 64-bitową wersją przeglądarki Google Chrome (lokalne uruchamianie pliku). Wydaje się, że ten problem został rozwiązany w powyższym rozwiązaniu innym niż jQuery.

Madzohan próbował w Safari i rozwiązanie działało, ale używało document.execCommand('SelectAll')zamiast używać .select()(jak określono na czacie i w komentarzach poniżej).

Jak wskazuje PointZeroTwo w komentarzach , kod można ulepszyć, aby zwracał wynik powodzenia / niepowodzenia. Możesz zobaczyć demo na tym jsFiddle .

AKTUALIZACJA: KOPIUJ PRZECHOWYWANIE FORMATU TEKSTU

Jak wskazał użytkownik w hiszpańskiej wersji StackOverflow , powyższe rozwiązania działają idealnie, jeśli chcesz dosłownie skopiować zawartość elementu, ale nie działają tak dobrze, jeśli chcesz wkleić skopiowany tekst w formacie (jako jest kopiowany do input type="text"formatu, format jest „utracony”).

Rozwiązaniem tego byłoby skopiowanie do edytowalnej zawartości, diva następnie skopiowanie jej execCommandw podobny sposób. Oto przykład - kliknij przycisk kopiowania, a następnie wklej do pola edycji treś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>

W jQuery wyglądał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>

clipboard.js to ładne narzędzie, które umożliwia kopiowanie tekstu lub danych HTML do schowka bez użycia Flasha. Jest bardzo łatwy w użyciu; po prostu dołącz .js i użyj czegoś takiego:

<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 jest również dostępny na GitHub .

Edytuj w dniu 15 stycznia 2016 r .: Najlepsza odpowiedź została dzisiaj zredagowana, aby odwoływać się do tego samego interfejsu API w mojej odpowiedzi opublikowanej w sierpniu 2015 r. Poprzedni tekst instruował użytkowników, aby korzystali z ZeroClipboard. Chcę tylko wyjaśnić, że nie wyrwałem tego z odpowiedzi jfriend00, a raczej na odwrót.

Prostota jest szczytem wyrafinowania.
Jeśli nie chcesz, aby tekst do skopiowania był widoczny:

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

With Line Breaks (rozszerzenie odpowiedzi od 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());

Możesz użyć tego kodu do skopiowania wartości wejściowej na stronie w Schowku, klikając przycisk

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

Następnie w przypadku tego kodu HTML musimy użyć tego kodu JQuery

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

To jest najprostsze rozwiązanie tego pytania

Jeszcze lepsze podejście bez flashowania lub innych wymagań to clipboard.js . Wszystko, co musisz zrobić, to dodać data-clipboard-target="#toCopyElement"dowolny przycisk, zainicjować go, new Clipboard('.btn');a on skopiuje zawartość DOM z identyfikatorem toCopyElementdo schowka. Jest to fragment, który kopiuje tekst podany w pytaniu za pomocą linku.

Jedynym ograniczeniem jest to, że nie działa na safari, ale działa na wszystkich innych przeglądarkach, w tym także na przeglądarkach mobilnych, ponieważ nie używa flasha

$(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();
}

Bardzo ważne jest, aby pole wejściowe nie miało display: none. Przeglądarka nie wybierze tekstu i dlatego nie zostanie skopiowana. Użyj opacity: 0z szerokością 0px, aby rozwiązać problem.

Jest to najprostsza metoda kopiowania zawartości

 <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'));
                    });

jQuery proste rozwiązanie.

Powinny być uruchamiane przez kliknięcie użytkownika.

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

możesz po prostu użyć tej biblioteki, aby łatwo zrealizować cel kopiowania!

https://clipboardjs.com/

Kopiowanie tekstu do schowka nie powinno być trudne. Nie powinno to wymagać dziesiątek kroków do skonfigurowania lub załadowania setek KB. Ale przede wszystkim nie powinno to zależeć od Flasha ani żadnego rozdętego frameworka.

Właśnie dlatego istnieje clipboard.js.

lub

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

Biblioteka ZeroClipboard zapewnia łatwy sposób kopiowania tekstu do schowka za pomocą niewidocznego filmu Adobe Flash i interfejsu JavaScript.

Tekst do skopiowania jest wprowadzany tekstem, na przykład: <input type="text" id="copyText" name="copyText"> a po kliknięciu przycisku powyżej tekst powinien zostać skopiowany do schowka, więc przycisk wygląda tak: <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

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

Uwaga : ZeroClipboard.swfi ZeroClipboard.js„plik powinien znajdować się w tym samym folderze, w którym znajduje się plik korzystający z tej funkcji, LUB musisz dołączyć, tak jak my umieszczamy <script src=""></script>na naszych stronach.

Większość proponowanych odpowiedzi tworzy dodatkowe tymczasowe ukryte elementy wejściowe. Ponieważ większość przeglądarek obecnie obsługuje edycję treści div, proponuję rozwiązanie, które nie tworzy ukrytych elementów, nie zachowuje formatowania tekstu i używa czystego JavaScript lub biblioteki jQuery.

Oto minimalistyczna implementacja szkieletu przy użyciu jak najmniejszej liczby wierszy kodów, jakie mogłem wymyślić:

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

Biblioteka schowka-wypełniacza jest wypełnieniem dla nowoczesnego interfejsu API schowka asynchronicznego opartego na obietnicy.

zainstaluj w CLI:

npm install clipboard-polyfill 

importuj jako schowek w pliku JS

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

przykład

Używam go w pakiecie require("babel-polyfill");i przetestowałem na chromie 67. Wszystko dobre do produkcji.

kod HTML tutaj

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

KOD 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);
                    }

możesz skopiować pojedynczy tekst oprócz tekstu elementu 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();
            }
        };

Czysty JS, bez wbudowanego kliknięcia, dla sparowanych klas „treść - przycisk kopiowania”. Byłoby wygodniej, jeśli masz wiele elementów)

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

Obsługa starszych przeglądarek:

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

Oba będą działać jak urok :),

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

Również w 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