In Internet Explorer kann ich das clipboardData-Objekt verwenden, um auf die Zwischenablage zuzugreifen. Wie mache ich das in Firefox, Safari und/oder Chrome?
Es gibt jetzt eine Möglichkeit, dies in den meisten modernen Browsern mit zu tun
document.execCommand('copy');
Dadurch wird der aktuell ausgewählte Text kopiert. Sie können mit textArea oder Eingabefeld auswählen
document.getElementById('myText').select();
Um Text unsichtbar zu kopieren, können Sie schnell eine TextArea generieren, den Text im Feld ändern, auswählen und kopieren, und dann die TextArea löschen. In den meisten Fällen blinkt diese TextArea nicht einmal auf dem Bildschirm.
Aus Sicherheitsgründen lässt der Browser das Kopieren nur zu, wenn ein Benutzer eine Aktion ausführt (z. B. durch Klicken auf eine Schaltfläche). Eine Möglichkeit, dies zu tun, wäre das Hinzufügen eines onClick-Ereignisses zu einer HTML-Schaltfläche, die eine Methode aufruft, die den Text kopiert.
Ein vollständiges Beispiel würde aussehen
<html>
<head>
<title>copy test</title>
</head>
<body>
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
<script>
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
</script>
</body>
</html>
Aus Sicherheitsgründen erlaubt Firefox nicht, Text in die Zwischenablage einzufügen. Mit Flash ist jedoch eine Problemumgehung verfügbar.
function copyIntoClipboard(text) {
var flashId = 'flashId-HKxmj5';
/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}
Der einzige Nachteil besteht darin, dass Flash aktiviert werden muss.
quelle ist derzeit tot: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (und so ist es Google Cache )
Online-Spreadsheets haken Strg + C-, Strg + V-Ereignisse ein, übertragen den Fokus auf ein ausgeblendetes TextArea-Steuerelement und setzen entweder den Inhalt auf den neuen Inhalt der Zwischenablage zum Kopieren oder lesen den Inhalt, nachdem das Ereignis zum Einfügen abgeschlossen wurde.
siehe auch Kann man die Zwischenablage in Firefox, Safari und Chrome mit Javascript lesen?
Es ist Sommer 2015 und mit so viel Aufruhr um Flash dachte ich, ich würde eine neue Antwort auf diese Frage hinzufügen, die ihre Verwendung komplett vermeidet.
clipboard.js ist ein Dienstprogramm von Nice, mit dem Text- oder HTML-Daten in die Zwischenablage kopiert werden können. Es ist sehr einfach zu bedienen, fügen Sie einfach die .js ein und verwenden Sie etwas wie das Folgende:
<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
In Firefox können Sie Daten in der Zwischenablage speichern, diese sind jedoch aus Sicherheitsgründen standardmäßig deaktiviert. Informationen zur Aktivierung finden Sie unter "JavaScript-Zugriff auf die Zwischenablage gewähren" in der Mozilla Firefox-Wissensdatenbank.
Die von amdfan angebotene Lösung ist die beste, wenn Sie viele Benutzer haben und die Konfiguration ihres Browsers nicht möglich ist. Sie können zwar testen, ob die Zwischenablage verfügbar ist, und einen Link zum Ändern der Einstellungen angeben, wenn die Benutzer technisch versiert sind. Der JavaScript-Editor TinyMCE folgt diesem Ansatz.
In 2017 können Sie dies tun (dies sagen, da dieser Thread fast 9 Jahre alt ist!)
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
Und jetzt copyStringToClipboard('Hello World')
kopieren
Wenn Sie die Zeile setData
bemerkt haben und sich gefragt haben, ob Sie verschiedene Datentypen festlegen können, lautet die Antwort ja.
Die Funktion copyIntoClipboard () funktioniert für Flash 9, scheint jedoch durch die Veröffentlichung von Flash Player 10 defekt zu sein. Hier eine Lösung, die mit dem neuen Flash Player funktioniert:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
Es ist eine komplexe Lösung, aber es funktioniert.
Ich muss sagen, dass keine dieser Lösungen wirklich funktioniert. Ich habe die Zwischenablage-Lösung aus der akzeptierten Antwort ausprobiert und funktioniert nicht mit Flash Player 10. Ich habe auch ZeroClipboard ausprobiert und war eine Weile sehr zufrieden damit.
Ich verwende es derzeit auf meiner eigenen Website ( http://www.blogtrog.com ), aber ich habe dabei merkwürdige Fehler festgestellt. Die Funktionsweise von ZeroClipboard besteht darin, dass ein unsichtbares Flash-Objekt über einem Element auf Ihrer Seite platziert wird. Ich habe festgestellt, dass das ZeroClipboard-Flash-Objekt aus dem Gleichgewicht geraten kann, wenn sich mein Element bewegt (z. B. wenn der Benutzer die Fenstergröße ändert und die Elemente richtig ausgerichtet sind). Ich vermute, es sitzt wahrscheinlich immer noch dort, wo es ursprünglich war. Sie haben Code, der das stoppen soll oder das Element neu anklebt, aber es scheint nicht gut zu funktionieren.
Also, in der nächsten Version von BlogTrog, denke ich, werde ich mit all den anderen Code-Hervorhebungselementen, die ich in der Wildnis gesehen habe, folgen und meine Schaltfläche In Zwischenablage kopieren entfernen. :-(
(Ich habe bemerkt, dass die Kopie in die Zwischenablage von dp.syntaxhiglighter jetzt ebenfalls beschädigt ist.)
viel zu alte Frage, aber ich habe diese Antwort nirgendwo gesehen ...
Überprüfen Sie diesen Link:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
wie alle sagten, ist aus Sicherheitsgründen standardmäßig deaktiviert. Der Link oben zeigt die Anweisungen, wie man es aktiviert (indem man about: config in firefox oder die user.js bearbeitet).
Glücklicherweise gibt es ein Plugin namens "AllowClipboardHelper", das mit nur wenigen Klicks etwas einfacher macht. Sie müssen jedoch die Besucher Ihrer Website darüber informieren, wie Sie den Zugriff in Firefox aktivieren können.
Verwenden Sie den modernen document.execCommand ("copy") Und jQuery. Diese Stackoverflow-Antwort anzeigen
var ClipboardHelper = { // as Object
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();
}};
So rufen Sie an:
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
//todo prepare Text: remove double whitespaces, trim
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
$(document).ready(function()
{
var $body=$('body');
$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn=$(this);
var text=$btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});
$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>
Ich habe Githubs Clippy für meine Bedürfnisse verwendet, eine einfache Flash-basierte Schaltfläche. Funktioniert gut, wenn man kein Styling benötigt und sich darüber freut, what auf der Serverseite einfügen zu können.
Verwenden Sie document.execCommand('copy')
. Wird in den neuesten Versionen von Chrome
, Firefox
, Edge
und Safari
unterstützt.
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>
Eine geringfügige Verbesserung der Flash-Lösung besteht in der Erkennung von Flash 10 mit swfobject:
http://code.google.com/p/swfobject/
wenn es dann als Flash 10 angezeigt wird, laden Sie ein Shockwave-Objekt mithilfe von Javascript. Shockwave kann (in allen Versionen) auch in die Zwischenablage lesen/schreiben, indem der Befehl copyToClipboard () in Jargon verwendet wird.
Von Addon-Code:
Falls noch jemand nach Chrome-Code gesucht hat, können Sie die hier beschriebene nsIClipboardHelper-Schnittstelle verwenden: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Wenn Sie Flash unterstützen, können Sie https://everyplay.com/assets/clipboard.swf verwenden und den Text flashvars verwenden, um den Text festzulegen
https://everyplay.com/assets/clipboard.swf?text=It%20Works
Das ist das, das ich zum Kopieren verwende, und Sie können als extra festlegen, wenn diese Optionen nicht unterstützt werden:
Für Internet Explorer: window.clipboardData.setData (DataFormat, Text) und window.clipboardData.getData (DataFormat)
Sie können den Text und die URL des DataFormat verwenden, um Daten und SetData abzurufen.
Und um Daten zu löschen:
Sie können Datei, HTML, Bild, Text und URL des DataFormat verwenden. PS: Sie müssen window.clipboardData.clearData (DataFormat) verwenden.
Und für andere, die keine window.clipboardData- und swf-Flash-Dateien unterstützen, können Sie auch die Strg + C-Taste auf Ihrer Tastatur für Windows und für Mac den Befehl + C verwenden
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp funktioniert mit Flash 10 und allen Flash-fähigen Browsern.
Außerdem wurde ZeroClipboard aktualisiert, um zu verhindern, dass der Flash-Film nicht mehr an der richtigen Stelle ist.
Da diese Methode "Erfordert", muss der Benutzer zum Kopieren auf eine Schaltfläche klicken. Dies ist für den Benutzer eine Annehmlichkeit, und es tritt nichts Schändliches auf.
Clipboard API soll document.execCommand
ersetzen. Safari arbeitet immer noch an der Unterstützung, daher sollten Sie einen Fallback bereitstellen, bis die Spezifikation abgeschlossen ist und Safari die Implementierung abgeschlossen hat.
const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};
<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>
Aus Sicherheitsgründen kann die Zwischenablage Permissions
zum Lesen und Schreiben aus der Zwischenablage erforderlich sein. Wenn das Snippet unter SO nicht funktioniert, versuchen Sie es mit localhost
oder einer anderen vertrauenswürdigen Domäne.
versuchen Sie, eine globale Speichervariable zu erstellen, in der die Auswahl gespeichert ist. Dann kann die andere Funktion auf die Variable zugreifen und beispielsweise eine Einfügung vornehmen.
var memory = '';//outside the functions but within the script tag.
function moz_stringCopy(DOMEle,firstPos,secondPos) {
var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}
function moz_stringPaste(DOMEle, newpos) {
DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);
}