Klicken Sie auf die Schaltfläche, um in die Zwischenablage zu kopieren.

Question

Wie kann ich den Text innerhalb einer div in die Zwischenablage kopieren? Ich habe eine div und muss einen Link hinzufügen, der den Text in die Zwischenablage kopiert. Gibt es eine Lösung dafür?

Lorem Ipsum ist einfach nur Blindtext aus der Druck- und Setzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Blindtext der Branche

Text kopieren

Nachdem ich auf Text kopieren geklickt habe, muss ich dann Strg + V drücken, um ihn einzufügen.

Answer 1

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

Answer 2

Wie man TEXT mit einem Klick auf eine Schaltfläche in die Zwischenablage kopiert

    Hallo, ich bin TEXT 1
    Hallo, ich bin der 2. TEXT

    Text 1 kopieren
    Text 2 kopieren

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

Answer 3

        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }

    Kopieren Sie Ihren Code

    kopieren

Answer 4

Es ist eine einfachste Methode, um den Inhalt zu kopieren

  Lorepm ispum 
 Inhalt kopieren

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

Answer 5

Die meisten vorgeschlagenen Antworten erzeugen ein zusätzliches temporäres verstecktes Eingabefeld(er). Da die meisten Browser heutzutage div-Inhalte bearbeiten können, schlage ich eine Lösung vor, die keine versteckten Elemente erzeugt, Textformatierung beibehält und reinen JavaScript oder die jQuery-Bibliothek verwendet.

Hier ist eine minimalistische Skelettimplementierung, die mit den wenigsten Codezeilen erstellt wurde, die ich mir vorstellen konnte:

//Reine Javascript-Implementierung:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text mit reinem JavaScript in die Zwischenablage kopiert");
});

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 mit jQuery in die Zwischenablage kopiert");
  }
});

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

  Überschrift 1
  Überschrift 2
  Überschrift 3
  Überschrift 4
  Überschrift 5
  Überschrift 6
  Textformatierung beibehalten

Mit reinem JavaScript kopieren
Mit jQuery kopieren
 Hier einfügen, um das Ergebnis zu sehen