Kopieren / Put Text in der Zwischenablage mit FireFox, Safari und Chrome
https://stackoverflow.com/questions/127040
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Im Internet Explorer kann ich das Objekt verwenden, um die clipboard Zwischenablage zuzugreifen. Wie kann ich tun, dass in FireFox, Safari und / oder Chrome?
Lösung
Es gibt jetzt eine Möglichkeit, einfach dies in den meisten modernen Browsern mit
document.execCommand('copy');
Dies wird kopieren aktuell ausgewählten Text. Sie können ein Textfeld oder Eingabefeld wählen Sie mit
document.getElementById('myText').select();
unsichtbar Text So kopieren Sie ein Textfeld schnell erzeugen können, ändern Sie den Text in das Feld ein, wählen Sie sie aus, kopieren Sie sie, und dann das Textfeld löschen. In den meisten Fällen ist dies nicht sogar Textarea auf dem Bildschirm blinken.
Aus Sicherheitsgründen Browser können Sie nur kopieren, wenn ein Benutzer eine Art von Handlung spielt (dh. Klicken auf eine Schaltfläche). Eine Möglichkeit, dies zu tun, wäre ein OnClick-Ereignis zu einer HTML-Schaltfläche hinzufügen, die eine Methode, die kopiert den Text aufruft.
Ein vollständiges Beispiel würde so 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>
Andere Tipps
Aus Gründen der Sicherheit ist Firefox nicht zulassen, dass Sie Text in der Zwischenablage platzieren. Allerdings gibt es eine Behelfslösung-Flash verfügbar werden.
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 ist, dass diese Flash-aktiviert sein 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 ist Google Cache )
Online-Tabellen Haken Strg + C, Strg + V Ereignisse und Transfer Fokus auf ein verstecktes Textarea-Steuerelement und entweder eingestellt seinen Inhalt auf dem gewünschten neuen Inhalt der Zwischenablage zu kopieren oder lesen Sie dessen Inhalt nach dem Ereignisse für Paste beendet hatte.
siehe auch Ist es möglich, die Zwischenablage in Firefox, Safari und Chrome mit Javascript?
lesenEs ist Sommer 2015, und mit so viel Turbulenzen um Flash-Ich dachte, ich eine neue Antwort auf diese Frage hinzufügen würde, die seine Verwendung vermeidet insgesamt.
clipboard.js ist ein nettes Dienstprogramm, das Kopieren von Text oder HTML-Daten in die Zwischenablage ermöglicht. Es ist sehr einfach zu bedienen, einfach die Js umfassen und so etwas wie folgt verwenden:
<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
Im Jahr 2017 können Sie dies tun (sagen das, weil dieses Thema 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 nun kopieren copyStringToClipboard('Hello World')
Wenn Sie die setData Linie bemerkt, und fragte sich, ob Sie verschiedene Datentypen die Antwort festlegen kann, ist ja.
Firefox ermöglicht es Ihnen, Daten in die Zwischenablage zu speichern, aber aufgrund der Auswirkungen auf die Sicherheit ist standardmäßig deaktiviert. Sehen Sie, wie es zu ermöglichen, in "Erteilen Sie JavaScript, um die Zwischenablage " im Mozilla Firefox Wissensbasis.
Die Lösung von amdfan angeboten wird, ist die beste, wenn Sie viele Benutzer haben und ihren Browser zu konfigurieren ist keine Option. Obwohl Sie können testen, ob die Zwischenablage zur Verfügung steht und einen Link zum Ändern der Einstellungen, wenn die Benutzer technisch versierten. Der JavaScript-Editor TinyMCE folgt diesem Ansatz.
Die copyIntoClipboard () Funktion funktioniert für Flash 9, aber es scheint, durch die Freisetzung von Flash Players um gebrochen zu werden 10. Hier ist 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 Arbeit. Ich habe die Zwischenablage Lösung aus der akzeptierten Antwort versucht, und es funktioniert nicht mit Flash Player 10. Ich habe auch versucht, ZeroClipboard, und ich war sehr glücklich mit ihm für eine Weile.
Ich bin zur Zeit auf meiner eigenen Website mit ( http://www.blogtrog.com ) , aber ich habe mit ihm seltsamen Fehler wurde bemerkt. Die Art und Weise ZeroClipboard funktioniert, ist, dass es ein unsichtbares Flash-Objekt über die Oberseite eines Element auf Ihrer Seite legt. Ich habe festgestellt, dass, wenn mein Element bewegt (wie wenn der Benutzer das Fenster ändert die Größe, und ich habe alles richtig ausgerichtet ist), das ZeroClipboard Flash-Objekt aus dem Gleichgewicht geraten wird und nicht mehr das Objekt abdeckt. Ich vermute, es ist wahrscheinlich immer noch sitzt, wo es ursprünglich war. Sie haben Code, dass zu stoppen angenommen hat, oder es das Element ReStick, aber es scheint nicht gut zu funktionieren.
So ... in der nächsten Version von BlogTrog, ich denke, ich Anzug mit allen anderen Code folgen werde highlighters Ich habe in der Wildnis gesehen und entfernen Sie meine Taste Kopieren in die Zwischenablage. : - (
(Ich bemerkte, dass dp.syntaxhiglighter der Kopie wird nun auch auf Clipboard gebrochen.)
viel zu alte Frage, aber ich habe diese Antwort nicht überall sehen ...
Überprüfen Sie diesen Link:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
wie jeder sagte, aus Sicherheitsgründen ist standardmäßig deaktiviert. die Verbindung oben zeigt die Anweisungen, wie es zu ermöglichen (durch Bearbeiten etwa: config in der folgenden oder der user.js).
Zum Glück gibt es ein Plugin namens „AllowClipboardHelper“, die Dinge einfacher, mit nur ein paar Klicks macht. aber Sie müssen noch Ihre Website-Besucher auf anweisen, wie Sie den Zugriff in Firefox aktivieren.
Ich habe Github Clippy für meine Bedürfnisse, einfache Flash-basierte Taste verwendet. Funktioniert ganz gut, wenn man Styling nicht braucht und freut sich über das Einfügen was einfügen auf der Server-Seite vorher.
Mit modernem document.execCommand ( "copy") und jQuery. Sehen Sie diese beantworten Stackoverflow
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();
}};
Wie Aufruf:
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>
Eine leichte Verbesserung auf der Flash-Lösung ist für Flash-10 unter Verwendung von swfobject zu erkennen:
http://code.google.com/p/swfobject/
und dann, wenn es als Flash-10 zeigt, versuchen Sie ein Shockwave-Objekt lädt Javascript. Shockwave kann lesen / schreiben in die Zwischenablage (in allen Versionen) als auch die copyToClipboard mit () Befehl in Kauderwelsch.
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp arbeitet mit Flash 10 und alle Flash-fähigen Browser.
Auch ZeroClipboard wurde aktualisiert, um den Fehler zu Seite Scrollen Film verursacht das Flash erwähnt zu vermeiden, in der richtigen Stelle nicht mehr sein.
Da diese Methode „Benötigt“ der Benutzer auf eine Schaltfläche klicken, um zu kopieren das ist eine Bequemlichkeit für den Benutzer und nichts ruchlosen auftritt.
Wenn Sie unterstützen Flash Sie verwenden können, https://everyplay.com/assets/clipboard.swf und verwenden Sie den flashvars Text den Text in
https://everyplay.com/assets/clipboard.swf?text= It% 20Works
Das ist die, die ich verwenden, zu kopieren und Sie können als zusätzliche gesetzt, wenn diese Optionen nicht unterstützen, die Sie verwenden können:
Für Internet Explorer: window.clipboardData.setData (Dataformat, Text) und window.clipboardData.getData (Dataformat)
Sie können den Text des Dataformat verwenden und URL zu getData und setData.
Und Daten zu löschen:
Sie können die Dataformat des verwenden Datei, HTML, Bild, Text und URL. PS: Sie benötigen window.clipboardData.clearData To Use (Dataformat);
Und für andere, das ist nicht unterstützen window.clipboardData und SWF Flash-Dateien können Sie auch Strg + c-Taste auf Ihrer Tastatur für Windows verwenden und für mac seinen Befehl + c
Von Add-on-Code:
Falls jemand suchte, wie es aus Chrom-Code zu tun, können Sie die nsIClipboardHelper Schnittstelle verwenden, wie hier beschrieben: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Mit document.execCommand('copy'). Unterstützt in den neuesten Versionen von Chrome, Firefox, Edge und Safari.
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>
versuchen, einen Speicher globale Variable Erstellen die Auswahl zu speichern, dann die andere Funktion der Variable zugreifen kann und eine Paste zum Beispiel tun ..
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);
}
Zwischenablage API soll ein href ersetzen <= "https://devdocs.io/ dom / document / ExecCommand“rel = "nofollow noreferrer"> document.execCommand . Safari ist nach wie vor auf der Unterstützung arbeiten, so dass Sie einen Rückfall zur Verfügung stellen sollen, bis spec absetzt und Safari beendet Umsetzung.
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 Zwischenablage Permissions kann notwendig sein, aus der Zwischenablage zu lesen und zu schreiben. Wenn die Schnipsel auf nicht funktioniert so geben sie einen Schuss auf localhost oder eine ansonsten vertrauenswürdigen Domäne.
