Jest jeszcze jeden sposób bez Flasha (oprócz API schowka wymienionego w odpowiedzi jfriend00 ). Należy zaznaczyć tekst, a następnie wykonać polecenie copy aby skopiować do schowka dowolny tekst aktualnie zaznaczony na stronie.

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

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

Tak to jest działa:

1. tworzy tymczasowe ukryte pole tekstowe.
2. kopiuje zawartość elementu do tego pola tekstowego.
3. wybiera zawartość pola tekstowego.
4. wykonuje polecenie copy w stylu: document.execCommand("copy").
5. usuwa tymczasowe pole tekstowe.

Możesz zobaczyć szybkie demo tutaj:

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łównym problemem jest to, że nie wszystkie przeglądarki obsługują w tej chwili tę funkcję, ale można jej używać na główne z:

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

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 id bez # now.

Jak donosi madziohan w komentarzach poniżej jest jakiś dziwny problem z 64-bitową wersją Google Chrome w niektórych przypadkach (uruchamianie pliku lokalnie). Ten problem wydaje się być rozwiązany za pomocą powyższego rozwiązania innego niż jQuery.

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

Jak wskazuje PointZeroTwo w komentarzach , kod można by poprawić tak, aby zwracał wynik sukcesu/porażki. Możesz zobaczyć demo na ten jsFiddle .

AKTUALIZACJA: KOPIUJ ZACHOWUJĄC FORMAT TEKSTOWY

Jako użytkownik wskazał w Hiszpańskiej wersji StackOverflow , rozwiązania wymienione powyżej działają idealnie, jeśli chcesz skopiować zawartość elementu dosłownie, ale nie działają tak dobrze, jeśli chcesz wkleić skopiowany tekst w formacie (ponieważ jest on kopiowany do input type="text", format jest "utracony").

Rozwiązaniem byłoby skopiowanie do treści edytowalnej div, a następnie skopiowanie jej za pomocą execCommand w podobny sposób. Tutaj jest przykład-kliknij na przycisk Kopiuj, a następnie wklej do pola edycji zawartoś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>

A w jQuery byłoby 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>

Schowek.js to ładne narzędzie, które umożliwia kopiowanie danych tekstowych lub HTML do schowka bez użycia Flasha. Jest bardzo łatwy w użyciu; wystarczy dołączyć .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>

Schowek.js jest również na GitHub .

Edit on Jan 15, 2016: top answer was edited today to reference the same API in my answer posted in August 2015. Poprzedni tekst instruował użytkowników, aby używali ZeroClipboard. Po prostu chcę być jasne że nie wyciągnąłem tego z odpowiedzi jfriend00, a raczej na odwrót.

Z przerwami linii (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());

Jeszcze lepsze podejście bez Flasha lub innych wymagań jest Schowek.js . Wystarczy dodać data-clipboard-target="#toCopyElement" na dowolnym przycisku, zainicjować go new Clipboard('.btn'); i skopiuje zawartość DOM o id toCopyElement do schowka. Jest to fragment, który kopiuje tekst podany w twoim pytaniu za pomocą linku.

Jednym z ograniczeń jest to, że nie działa na safari, ale działa na wszystkich innych przeglądarkach, w tym 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>

Jest to najprostsza metoda kopiowania treś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'));
                    });

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

Prostota jest najwyższym wyrafinowaniem.
Jeśli nie chcesz, aby tekst 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;"><input>

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

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

Https://clipboardjs.com/

Kopiowanie tekstu do schowka nie powinno być trudne. Nie powinno wymagać dziesiątki kroków konfiguracji lub setki Kb do załadowania. Ale większość wszystko, nie powinno zależeć od Flasha lub jakiegokolwiek nadętego frameworka.

Dlatego Schowek.js istnieje.

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 JavaScript interfejs.

Tekst do skopiowania jest w tekście wejściowym, jak: <input type="text" id="copyText" name="copyText"> i, po kliknięciu przycisku powyżej tekst powinien zostać skopiowany do schowka, więc przycisk jest jak: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Twój skrypt powinien być jak:

<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.swf i ZeroClipboard.js" Plik powinien znajdować się w tym samym folderze co plik korzystający z tej funkcjonalności, lub musisz dołączyć tak jak my dołączamy {[5] } do naszego stron.

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

Większość proponowanych odpowiedzi tworzy dodatkowy tymczasowy ukryty element (- Y) wejściowy (- e). 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 czystej biblioteki JavaScript lub jQuery.

Oto minimalistyczna implementacja szkieletu wykorzystująca najmniejszą liczbę linii kodów, jaką 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>

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

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

Clipboard-biblioteka polyfill jest polyfill dla nowoczesnego asynchronicznego API schowka 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 z require("babel-polyfill"); i testowałem na chrome 67. Wszystko dobre do produkcji.

JQuery proste rozwiązanie.

Powinny zostać wywołane kliknięciem użytkownika.

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

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

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

1. JQUERY:

Https://paulund.co.uk/jquery-copy-clipboard