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.
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.
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:
document.execCommand("copy")
.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:
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.
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>
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.
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());
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>
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>
<div class="form-group">
<label class="font-normal MyText">MyText to copy</label>
<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();
}
<!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>
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'));
});
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
Sie können diese Lib einfach verwenden, um das Kopierziel zu erreichen!
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
Die ZeroClipboard-Bibliothek bietet eine einfache Möglichkeit, Text in die .__ zu kopieren. Zwischenablage mit einem unsichtbaren Adobe Flash-Film und einem JavaScript Schnittstelle.
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.
jQuery einfache Lösung.
Sollte durch Klick des Benutzers ausgelöst werden.
$("<textarea/>").appendTo("body").val(text).select().each(function () {
document.execCommand('copy');
}).remove();
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();
}
};
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>
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);
}
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');
Ich verwende es in einem Paket mit require("babel-polyfill");
und habe es auf Chrome 67 getestet. Alles gut für die Produktion.
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.
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>