Kliknij przycisk skopiuj do schowka za pomocą jQuery


433

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



Trello ma sprytny sposób na zrobienie tego bez flashowania: stackoverflow.com/questions/17527870/…
Paul Schreiber

Zapoznaj się z tym, stackoverflow.com/questions/22581345/... uzyskałem oczekiwane rozwiązanie za pomocą czystego JavaScript
Vignesh Chinnaiyan

@MichaelScheper - niektórzy użytkownicy są nawet wystarczająco inteligentni, aby zauważyć, że mój komentarz i większość odpowiedzi tutaj zostały opublikowane ponad cztery lata temu, kiedy zeroclipboard, oparty na małej aplikacji flash, był jedyną możliwą opcją dla różnych przeglądarek praca ze schowkiem i rozwiązaniem goto. Dzisiaj wszystkie nowoczesne przeglądarki obsługują to natywnie, więc nie jest to już problemem, ale tak nie było w 2014 r.
adeneo

@adeneo: Jasne, ale nie wszyscy użytkownicy są tak „inteligentni”, a twój komentarz wciąż ma dwie pozytywne opinie.
Michael Scheper

Odpowiedzi:


483

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:


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


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.


1
clipboard.js został właśnie dodany do tego edytowanego postu. To dobre narzędzie, które podałem jako odpowiedź na to pytanie w sierpniu 2015 r.
programista

1
@acoder - Obsługa schowka regularnie się zmienia. Na przykład Firefox dopiero niedawno (pod koniec 2015 r.) Włączył się document.execCommand("copy")w wystarczających okolicznościach, aby polegać na tym. Staram się więc aktualizować moją odpowiedź (która została pierwotnie napisana prawie 2 lata temu). Nadal nie mamy niezawodnego rozwiązania dla Safari, innego niż wstępne wybranie tekstu i nakazanie użytkownikowi ręcznego naciśnięcia Ctrl + C, ale przynajmniej postęp jest robiony gdzie indziej.
jfriend00

1
Tu jest link do wsparcia API Schowek: caniuse.com/#feat=clipboard
L84

2
Do Twojej wiadomości, zgodnie z tym zestawem informacji o wydaniu Safari , wygląda na to, że Safari 10 obsługuje teraz, document.execCommand("copy")więc ten kod powinien teraz działać w Safari 10.
jfriend00

1
@sebastiangodelet - domena publiczna.
jfriend00

641

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>


5
dziwne ... tutaj to działa, ale nie mogę pracować lokalnie 0o jquery-1.11.3 Chrome 43.0.2357.130 (64-bit)
madzohan

2
@madzohan Ok, udało mi się odtworzyć problem. To dziwne, ponieważ mogłem go odtworzyć tylko lokalnie (plik: //) w 64-bitowym Chrome. Znalazłem też szybkie rozwiązanie, które działa dla mnie: używając zwykłego JavaScript zamiast jQuery. Zaktualizuję odpowiedź tym kodem. Sprawdź to i daj mi znać, czy to działa dla Ciebie.
Alvaro Montoro,

1
FWIW - document.execCommand („kopia”) zwraca wartość logiczną (IE, Chrome, Safari) wskazującą, czy kopiowanie się powiodło. Można go użyć do wyświetlenia komunikatu o błędzie w przypadku awarii. Firefox zgłasza wyjątek w przypadku niepowodzenia (przynajmniej w wersji 39), wymagając try / catch do obsługi błędu.
PointZeroTwo

3
Nie działało to dla mnie, dopóki nie upewniłem się, że Aux jest widoczny na stronie, dodając następujące wiersze: aux.style.position = "fixed"; aux.style.top = 0;powyżej appendChildpołączenia.
ariscris,

7
Oryginalna implementacja jQuery nie zachowuje podziałów linii, ponieważ używa elementu INPUT. Zamiast tego użycie TEXTAREA rozwiązuje ten problem.
thomasfuchs

37

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.


clipboard-js - jest nieaktualny Wiadomość autora: Przeprowadź
Jewgienij

26

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

wydaje się nie działać na iPadzie, nie testowałem, ale sugerowane rozwiązanie jest tutaj: stackoverflow.com/a/34046084
user1063287

To działało dla mnie, ale jeśli tekst do skopiowania zawiera znaki powrotu karetki, równie dobrze możesz zamiast tego użyć pola tekstowego.
Alex

13

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

9

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


8

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>


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

1
Można tego użyć tylko dla Textarea i pola tekstowego.
Vignesh Chinnaiyan,

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

Niezłe obejście. Może dodać .addClass("hidden")do <input>tagu, aby nigdy nie pojawiał się w przeglądarce?
Roland

5

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.


4

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

4

jQuery proste rozwiązanie.

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

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

3

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.


2

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

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.


6
Flash zmierza w kierunku Geocities.
koder

2

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>


2

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.


1

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

zmień to: .value na .innerHTML
Omar N Shamali

1

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

0

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:


-1

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.