it-swarm.com.de

Klicken Sie auf die Schaltfläche Kopieren in die Zwischenablage mit jQuery

Wie kopiere ich den Text in einem Div in die Zwischenablage? Ich habe ein div und muss einen Link hinzufügen, der den Text in die Zwischenablage hinzufügt. Gibt es dafür eine Lösung?

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

Nachdem ich auf Text kopieren geklickt habe, drücke ich Ctrl + VEs muss eingefügt werden.

381
Dishan TD

Stand 2016

Ab 2016 können Sie jetzt in den meisten Browsern Text in die Zwischenablage kopieren, da die meisten Browser die Möglichkeit haben, eine Textauswahl programmgesteuert mit document.execCommand("copy") in die Zwischenablage zu kopieren, die von einer Auswahl abhängt.

Wie bei einigen anderen Aktionen in einem Browser (z. B. Öffnen eines neuen Fensters) kann das Kopieren in die Zwischenablage nur über eine bestimmte Benutzeraktion (z. B. einen Mausklick) erfolgen. Zum Beispiel kann dies nicht über einen Timer erfolgen.

Hier ist ein Codebeispiel:

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

Hier ist eine etwas fortgeschrittenere Demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

Mit clipboard.js können Sie auch eine vorgefertigte Bibliothek erhalten, die dies für Sie erledigt.


Alter, historischer Teil der Antwort

Das direkte Kopieren in die Zwischenablage über JavaScript ist aus Sicherheitsgründen in keinem modernen Browser zulässig. Die häufigste Problemumgehung besteht darin, eine Flash-Funktion zum Kopieren in die Zwischenablage zu verwenden, die nur durch einen direkten Klick des Benutzers ausgelöst werden kann.

Wie bereits erwähnt, ist ZeroClipboard ein beliebter Satz von Code zum Verwalten des Flash-Objekts zum Kopieren. Ich habe es benutzt. Wenn Flash auf dem Browser-Gerät installiert ist (was ein Handy oder Tablet ausschließt), funktioniert es.


Die nächsthäufigste Problemumgehung besteht darin, den in der Zwischenablage enthaltenen Text einfach in ein Eingabefeld zu platzieren, den Fokus auf dieses Feld zu legen und den Benutzer zum Drücken auf zu raten Ctrl + C um den text zu kopieren.

Weitere Erörterungen des Problems und mögliche Problemumgehungen finden Sie in den folgenden früheren Beiträgen zum Stapelüberlauf:


Diese Fragen, die nach einer modernen Alternative zur Verwendung von Flash fragen, haben viele positive Fragen und keine Antworten mit einer Lösung erhalten (wahrscheinlich, weil es keine gibt):


Internet Explorer und Firefox verfügten früher über nicht standardmäßige APIs für den Zugriff auf die Zwischenablage. In den neueren Versionen wurden diese Methoden jedoch (wahrscheinlich aus Sicherheitsgründen) nicht mehr empfohlen.


Es gibt eine im Entstehen begriffene Standardbemühung , um zu versuchen, einen "sicheren" Weg zu finden, um die häufigsten Zwischenablageprobleme zu lösen (wahrscheinlich erfordert dies eine bestimmte Benutzeraktion, wie es die Flash-Lösung erfordert), und es sieht so aus ist möglicherweise teilweise in den neuesten Versionen von Firefox und Chrome implementiert, aber das habe ich noch nicht bestätigt.

428
jfriend00

Es gibt einen anderen Nicht-Flash-Weg (abgesehen von der Clipboard-API , die in jfriend00s Antwort genannt wird). Sie müssen den Text auswählen und dann führen Sie den Befehl copy aus, um den aktuell auf der Seite ausgewählten Text in die Zwischenablage zu kopieren.

Diese Funktion kopiert beispielsweise den Inhalt des übergebenen Elements in die Zwischenablage (aktualisiert mit Vorschlag in den Kommentaren von PointZeroTwo ):

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

So funktioniert es:

  1. Erstellt ein temporäres ausgeblendetes Textfeld.
  2. Kopiert den Inhalt des Elements in dieses Textfeld.
  3. Wählt den Inhalt des Textfelds aus.
  4. Führt die Befehlskopie wie folgt aus: document.execCommand("copy").
  5. Entfernt das temporäre Textfeld.

Sie können eine kurze Demo hier sehen:

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

Das Hauptproblem ist, dass derzeit nicht alle Browser diese Funktion unterstützen, aber Sie können es für die Hauptbrowser verwenden:

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

Update 1: Dies kann auch mit einer reinen JavaScript-Lösung (keine jQuery) erreicht werden:

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

Beachten Sie, dass wir die ID jetzt ohne # übergeben.

Wie madzohan in den Kommentaren unten berichtet, gibt es in einigen Fällen einige seltsame Probleme mit der 64-Bit-Version von Google Chrome (wobei die Datei lokal ausgeführt wird). Dieses Problem scheint mit der oben genannten Nicht-jQuery-Lösung behoben zu sein.

Madzohan versuchte es in Safari und die Lösung funktionierte, aber document.execCommand('SelectAll') anstelle von .select() (wie im Chat und in den Kommentaren unten angegeben).

Wie PointZeroTwo in den Kommentaren darauf hinweist könnte der Code verbessert werden, so dass ein Erfolg/Misserfolg resultiert. Sie können eine Demo auf this jsFiddle sehen.


UPDATE: COPY BEHALTEN DAS TEXTFORMAT

Wie ein Benutzer in der spanischen Version von StackOverflow hervorgehoben hat, funktionieren die oben aufgeführten Lösungen perfekt, wenn Sie den Inhalt eines Elements wörtlich kopieren möchten. Sie funktionieren jedoch nicht so gut, wenn Sie den kopierten Text einfügen mit Format (da es in einen input type="text" kopiert wird, geht das Format "verloren").

Eine Lösung dafür wäre, in einen editierbaren div-Inhalt zu kopieren und ihn dann auf ähnliche Weise mit der execCommand-Datei zu kopieren. Hier ist ein Beispiel - klicken Sie auf die Schaltfläche "Kopieren" und fügen Sie sie in das unten bearbeitbare Feld ein:

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>

Und in jQuery wäre es so:

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>

517
Alvaro Montoro

clipboard.js ist ein Dienstprogramm von Nice, das das Kopieren von Text- oder HTML-Daten in die Zwischenablage ohne Verwendung von Flash ermöglicht. Es ist sehr einfach zu bedienen. Fügen Sie einfach die JS-Dateien hinzu und verwenden Sie Folgendes:

<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 ist auch auf GitHub .

Bearbeiten am 15. Januar 2016: Die beste Antwort wurde bearbeitet heute, um auf dasselbe API in meiner im August 2015 veröffentlichten Antwort zu verweisen. Im vorherigen Text wurden Benutzer aufgefordert, ZeroClipboard zu verwenden. Ich möchte nur klarstellen, dass ich dies nicht aus jfriend00s Antwort gerissen habe, eher umgekehrt. 

34
a coder

Mit Zeilenumbrüchen (Erweiterung der Antwort von 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());
10

Ein noch besserer Ansatz ohne Flash oder andere Anforderungen ist clipboard.js . Alles, was Sie tun müssen, ist, data-clipboard-target="#toCopyElement" auf einer beliebigen Schaltfläche hinzuzufügen, sie zu initialisieren new Clipboard('.btn'); und der Inhalt von DOM wird mit der ID toCopyElement in die Zwischenablage kopiert. Dies ist ein Ausschnitt, der den in Ihrer Frage enthaltenen Text über einen Link kopiert.

Eine Einschränkung ist jedoch, dass es auf Safari nicht funktioniert, aber es funktioniert mit allen anderen Browsern, einschließlich mobilen Browsern, da es keinen Flash verwendet

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

7
Amgad

Einfachheit ist die entscheidende Kultiviertheit. 
Wenn Sie nicht möchten, dass der zu kopierende Text sichtbar ist:

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>
6
Nadav
<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();
}
4
Nayan Hodar
<!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>
4

Es ist eine einfachste Methode, den Inhalt zu kopieren

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

Sie können diesen Code zum Kopieren des Eingabewerts auf der Seite in der Zwischenablage verwenden, indem Sie auf eine Schaltfläche klicken

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

Dann müssen wir für diesen HTML-Code diesen JQuery-Code verwenden

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

Dies ist die einfachste Lösung für diese Frage

3
keivan kashani

Sie können diese Lib einfach verwenden, um das Kopierziel zu erreichen!

https://clipboardjs.com/

Das Kopieren von Text in die Zwischenablage sollte nicht schwer sein. Es sollte nicht erforderlich sein Dutzende Schritte zum Konfigurieren oder Hunderte von KBs zum Laden. Aber die meisten von Alles sollte nicht von Flash oder einem aufgeblähten Framework abhängen.

Deshalb gibt es clipboard.js.

oder

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

Die ZeroClipboard-Bibliothek bietet eine einfache Möglichkeit, Text in die .__ zu kopieren. Zwischenablage mit einem unsichtbaren Adobe Flash-Film und einem JavaScript Schnittstelle.

3
xgqfrms

Der zu kopierende Text wird in Texteingabe geschrieben, beispielsweise: <input type="text" id="copyText" name="copyText">. Wenn Sie auf die Schaltfläche klicken, wird der Text in die Zwischenablage kopiert. Die Schaltfläche ist also wie folgt: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Ihr Skript sollte folgendermaßen aussehen:

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

</script>

Für CDN-Dateien

note: ZeroClipboard.swf und ZeroClipboard.js "Die Datei sollte sich im selben Ordner befinden wie die Datei, in der diese Funktion verwendet wird. OR müssen Sie so einfügen, wie wir <script src=""></script> auf unseren Seiten verwenden.

2

jQuery einfache Lösung.

Sollte durch Klick des Benutzers ausgelöst werden.

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

sie können einen einzelnen Text neben dem Text eines HTML-Elements kopieren.

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

Beide funktionieren wie ein Zauber :),

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

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

1
harshal lonare

hTML-Code hier

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

JS-CODE:

     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);
                    }
1
li bing zhao

Clipboard-polyfill library ist eine Polyfill für die moderne Promise-basierte asynchrone Zwischenablage-API.

in CLI installieren:

npm install clipboard-polyfill 

import als Zwischenablage in JS-Datei

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

Beispiel

Ich verwende es in einem Paket mit require("babel-polyfill"); und habe es auf Chrome 67 getestet. Alles gut für die Produktion.

1

Es ist sehr wichtig, dass das Eingabefeld keinen display: none hat. Der Browser wählt den Text nicht aus und wird daher nicht kopiert. Verwenden Sie opacity: 0 mit einer Breite von 0px, um das Problem zu beheben.

1
Mark Lancaster

Die meisten der vorgeschlagenen Antworten erstellen zusätzliche temporäre verborgene Eingabeelemente. Da die meisten Browser heutzutage die Bearbeitung von div-Inhalten unterstützen, schlage ich eine Lösung vor, bei der keine versteckten Elemente erstellt, die Textformatierung beibehalten und reine JavaScript- oder jQuery-Bibliothek verwendet wird. 

Hier ist eine minimalistische Skelett-Implementierung mit den wenigsten Codezeilen, die ich mir vorstellen kann:

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

1
Jeffrey Kilelo