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

 document.getElementById('markup-copy').addEventListener('click', function() {
               var txt = "Ihr Text hier";
                    $("").appendTo("body").val(txt).select().each(function () {
                    document.execCommand('copy');
                }).remove();
            });
</code></pre></x-turndown>

Answer 2

Eine Kombination mehrerer Antworten befindet sich unten. Dies bewahrt Zeilenumbrüche korrekt auf.

// Kopiert einen Wert in die Zwischenablage
    window.copyToClipboard = function(value) {
        // Der Navigator-Zwischenablage-API benötigt einen sicheren Kontext (https)
        if (navigator.clipboard && window.isSecureContext) {
            // Navigator-Zwischenklip-API-Methode
            return navigator.clipboard.writeText(value).then(function () {
                //alert('Es hat funktioniert! Drücken Sie STRG - V zum Einfügen')
            }, function () {
                alert('Fehler beim Kopieren in die Zwischenablage.')
            });
        } else {
            // Textbereich Methode
            let textArea = document.createElement("textarea");
            textArea.value = value;
            // Den Textbereich aus dem Ansichtsbereich nehmen
            textArea.style.position = "fixed";
            textArea.style.left = "-999999px";
            textArea.style.top = "-999999px";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            document.execCommand('copy');
            textArea.remove();
        }
    }

Answer 3

JavaScript pur + Mehr Kompatibilität

function copyToClipboard(e) {
    selectText(e);
    document.execCommand("copy");
}

function selectText(e) {
    e = document.getElementById(e);

    if (document.body.createTextRange) {
        const r = document.body.createTextRange();
        r.moveToElementText(e);
        r.select();
    } else if (window.getSelection) {
        const s = window.getSelection();
        const r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
    } else {
        console.warn("Could not select text in "+e+": Unsupported browser.");
    }
}

25

Answer 4

HTML:

// du brauchst Bootstrap(js && css) und JQuery(js)
text

CSS:

.text-copy {
  cursor: pointer;
  color: #0d6efd;
  text-decoration: underline;
}
.text-copy:hover {
  color: #1b6be4;
}

JS (mit JQuery):

$(document).ready(function() {
  var elements = $('.copy-text');
  for(let i = 0; i < elements.length; i++) {
    const element = $(elements[i]);
    element.attr('data-toggle', 'tooltip')
           .attr('data-placement', 'top')
           .attr('title', `Klicke zum Kopieren von "${element.attr('value')}"`);
  }
  $('[data-toggle="tooltip"]').tooltip();
  $('.text-copy').click(function() {
    var $temp = $("");
    $("body").append($temp);
    $temp.val($(this).attr('value')).select();
    document.execCommand("copy");
    $temp.remove();
  });
});

$(document).ready(async function() {
  var elements = $('.text-copy');
  for(let i = 0; i");
    $("body").append($temp);
    $temp.val($(this).attr('value')).select();
    document.execCommand("copy");
    $temp.remove();
  });
});

body {
  display: grid;
  justify-content: center;
}

.text-copy {
  cursor: pointer;
  color: #0d6efd;
  text-decoration: underline;
}

.text-copy:hover {
  color: #1b6be4;
}

    dein text

    hier einfügen

Answer 5

Hier ist eine elegante JavaScript-Lösung

Text kopieren

function copy() {
  var copiedtext = document.getElementById("your_input");
  copiedtext.select();
  copiedtext.setSelectionRange(0, 99999); //für mobile Geräte
  navigator.clipboard.writeText(copiedtext.value);
  alert("Du hast gerade " + copiedtext.value + " kopiert");
}