Wie kopiert man einen div-Inhalt in die Zwischenablage ohne flash

Ist es 🙂 ich habe ein div mit der id #toCopy, und eine Schaltfläche mit der id #kopieren.
Was ist der beste Weg, zu kopieren #toCopy Inhalt in die Zwischenablage beim drücken #kopieren?

Haben Sie überprüft, alle die "wie kopiere ich Sachen in die Zwischenablage" - Fragen unter dem "Related" überschrift auf der rechten Seite?
Duplikat von stackoverflow.com/questions/400212/...
Der einzige browser, der unterstützt das kopieren in die Zwischenablage, ohne Flash oder andere Lösungen von Drittanbietern ist der Internet Explorer, also auf gut Glück mit, dass.
Endlich mal ein Vorteil im IE @adeneo

InformationsquelleAutor Luis Gallego | 2014-04-13

-5

AKTUALISIERTE ANTWORT
Javascript wurde eingeschränkt, die aus der Verwendung der Zwischenablage, früh.
aber heutzutage ist es unterstützt copy/paste-Befehle.
Siehe Dokumentation von mozilla und caniuse.com.
```
document.execCommand('paste')
```
stellen Sie sicher, dass Sie Unterstützung von Browsern, die nicht.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
http://caniuse.com/#search=command

Javascript ist nicht erlaubt die Verwendung der Zwischenablage, aber andere plugins wie flash Zugriff.

Wie kopiere ich in die Zwischenablage in JavaScript?
- Das ist nicht wahr! document.execCommand("copy"); vorhanden ist.
- seine ziemlich neu, denn es wurde nicht unterstützt, wenn ich diese Frage beantwortet, wäre ich vorsichtig mit dieser, da nur die neuesten Browser unterstützen diese Funktion und das ist schlecht mit einigen der Zielgruppen. Am besten Sie tun können, ist die Verwendung von Flash, oder das erstellen einer pollyfill, dass unterstützt flash als fallback. Wenn Sie Sie nicht verwenden flash, dann nicht implementieren, dies an allen stellen eine Möglichkeit verwenden, die es nur auf unterstützten Browsern und stellen sicher, dass browser, die nicht unterstützen, es kann ohne es aswell.
- Tatsächlich, der einzige große browser, der unterstützt es nicht schon ist Safari. Ich habe ein addon für stack-überlauf Stack genannt Schaltfläche "Kopieren" (chrome und firefox für jetzt, github.com/MrMino/StackCtrlC, shameless plug), und es geht die code-Prüfungen kein problem. Wenn Sie vorschlagen, ein fallback, warum nicht ein fallback von etwas, das eigentlich in der Norm?
- da nicht jeder browser unterstützt es.
- Wieder, nur in Safari nicht. Für jetzt können Sie nur ein fallback, wenn Safari erkannt wird. Herstellung einer Komponente in etwas so unsicheres wie flash für Sie, ist das, was ich wäre viel vorsichtiger mit.
- Sie kann nicht zählen die neueste version von einem browser unterstützt, denn nicht jeder hat einen aktuellen browser.. sogar mit Chrom, wo die auto-update ist standardmäßig aktiviert.
- Firefox war der Letzte der Partei, und es unterstützt seit v41. Es ist schon ~8 große updates seit dann, Firefox ist nun in der v45. Stop mit der übermäßigen Abwärtskompatibilität bullsh*t ist. Es ist nicht etwas, website brechen.
- von mozilla docs safari hat keine Unterstützung, es ist immer noch nicht implementiert in Safari, so dass die beste Programmier-Paradigma wäre eine fallback (polyfill), wo Sie kann zeigen Sie eine Nachricht mit der Frage, ob Sie würde drücken Sie STRG + C. statt eine Taste, die einfach nicht funktionieren. Sie können besser Vorsicht als Nachsicht. und nicht faul sein. Es ist der beste Weg für heute und für die kommenden Tage. auch clipboardjs.com ist ein schöner Weg, mit einem safari-update, das Sie nur benötigen würde, eine lib.js update.
- Das ist das, was ich sagte. Safari nicht implementieren diese für Ihre Sicherheit. Es hat ~3% der browser-Nutzung jetzt, es sollte nicht der Grund für die Verwendung einer unsicheren flash-fallback für diese.
- ich bin damit einverstanden, nur sicherstellen, dass es nicht zeigen, eine Kopie paste-Taste, wenn es nicht unterstützt wird, richtig 🙂
InformationsquelleAutor Zezura

Können Sie in die Zwischenablage kopieren fast in jedem browser von Eingang Elemente (Elemente, hat .value - Eigenschaft), aber man kann nicht von Elemente wie <div>, <p>, <span>... (Elemente, hat .innerHTML Eigenschaft).

Aber ich benutze diesen trick zu tun:

Erstellen Sie eine temporäre input-element, sagen <textarea>
Kopieren innerHTML aus <div> auf das neu erstellte <textarea>
Kopieren .value von <textarea> in die Zwischenablage
Entfernen der temporären <textarea> element, das wir gerade erstellt haben

JS:

function CopyToClipboard (containerid) {
  //Create a new textarea element and give it id='temp_element'
  var textarea = document.createElement('textarea')
  textarea.id = 'temp_element'
  //Optional step to make less noise on the page, if any!
  textarea.style.height = 0
  //Now append it to your page somewhere, I chose <body>
  document.body.appendChild(textarea)
  //Give our textarea a value of whatever inside the div of id=containerid
  textarea.value = document.getElementById(containerid).innerText
  //Now copy whatever inside the textarea to clipboard
  var selector = document.querySelector('#temp_element')
  selector.select()
  document.execCommand('copy')
  //Remove the textarea
  document.body.removeChild(textarea)
}

HTML:

<div id="to-copy">
  This text will be copied to your clipboard when you click the button!
</div>
<button onClick="CopyToClipboard('to-copy')">Copy</button>

Etwas spät aber hoffe, das hilft!

Funktioniert sehr gut !
besser als jede "input" - wie die Umsetzung, die ich gesehen habe und arbeitet mit mehreren Elemente kopieren. Danke!
Frage mich, warum nicht verwendete Semikolon am Ende der Zeilen in der Funktion!
es ist optional in JavaScript.

InformationsquelleAutor Hani

Ohne id:

function copyClipboard(el, win){
   var textarea,
       parent;

   if(!win || (win !== win.self) || (win !== win.window))
      win = window;
   textarea = document.createElement('textarea');
   textarea.style.height = 0;
   if(el.parentElement)
      parent = el.parentElement;
   else
      parent = win.document;
   parent.appendChild(textarea);
   textarea.value = el.innerText;
   textarea.select();
   win.document.execCommand('copy');
   parent.removeChild(textarea);
}

Habe ich nicht getestet, für verschiedene windows (iframes) aber!

InformationsquelleAutor centurian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.