Skopiuj do schowka bez Flasha

Znalazłem wiele rozwiązań do kopiowania do schowka, ale wszystkie one albo z fleszem, albo dla stron internetowych. Szukam metody kopiowania do schowka automatycznie, bez flasha i po stronie użytkownika, to jest dla skryptów użytkownika i oczywiście dla wielu przeglądarek.

Bez Flasha jest to po prostu niemożliwe w większości przeglądarek. Schowek użytkownika jest zasobem istotnym dla bezpieczeństwa, ponieważ może zawierać takie elementy, jak hasła lub numery kart kredytowych. Dlatego przeglądarki słusznie nie zezwalają na dostęp do niego w Javascript (niektóre pozwalają na to z ostrzeżeniem pokazanym, że użytkownik potwierdził, lub z podpisanym kodem Javascript, ale żadna z nich nie jest cross-browser).

Wypróbowałem rozwiązanie flashowe i też mi się nie podobało. Zbyt złożone i zbyt wolne. Stworzyłem obszar tekstowy, umieściłem w nim dane i użyłem zachowania przeglądarki „CTRL + C”.

Część javascript jQuery:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

Część HTML:
<textarea id="textArea1"></textarea>

Teraz umieść to, co chcesz skopiować, w „WPISZ TEKST DO SKOPIOWANIA TUTAJ. MOŻE BYĆ FUNKCJĄ. powierzchnia. U mnie działa dobrze. Musisz tylko wykonać jedną kombinację CTRL + C. Jedyną wadą jest to, że w witrynie będzie wyświetlany brzydki obszar tekstowy. Jeśli użyjesz style = "display: none", rozwiązanie kopiowania nie będzie działać.

clipboard.js został właśnie wydany do kopiowania do schowka bez potrzeby Flasha

Zobacz to w akcji tutaj> http://zenorocha.github.io/clipboard.js/#example-action

W końcu jest tutaj! (O ile nie obsługujesz Safari ani IE8 ... -_-)

Teraz możesz obsługiwać operacje schowka bez Flasha. Oto odpowiednia dokumentacja:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{Podczas gdy z niecierpliwością czeka na Xbrowser wsparciu API Schowek ...}

IE tylko raz poprosi użytkownika o dostęp do Schowka.
Safari (5.1 w momencie pisania) nie obsługuje execCommanddlacopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

Wszystkie (z wyjątkiem przeglądarek Firefox, który jest w stanie obsłużyć tylko typ MIME "plain/text"miarę Przetestowałem) zostały nie zrealizowane z API schowka . To znaczy, próbując odczytać zdarzenie schowka w Chrome przy użyciu

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

throws: Uncaught TypeError: Illegal constructor

Najlepsze źródło niewiarygodnego bałaganu, który dzieje się między przeglądarkami i schowkiem, można zobaczyć tutaj (caniuse.com) (→ Śledź komentarze w sekcji „Uwagi” ).
MDN mówi, że podstawową obsługą jest „(TAK)” dla wszystkich przeglądarek, co jest niedokładne, ponieważ można by oczekiwać, że przynajmniej API będzie w ogóle działać.

Możesz użyć schowka lokalnego dla strony HTML. Umożliwia to kopiowanie / wycinanie / wklejanie treści W RAMACH strony HTML, ale nie z / do aplikacji innych firm lub między dwiema stronami HTML.

Oto jak możesz napisać niestandardową funkcję, która to zrobi (przetestowana w Chrome i Firefox):

Oto FIDDLE, które pokazuje, jak możesz to zrobić.

Wkleję tutaj również skrzypce w celach informacyjnych.

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')zrobisz, co chcesz. Ale w tym wątku nie było przykładów bezpośrednio użytecznych bez cruft, więc oto jest:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Nie da się obejść, musisz użyć lampy błyskowej. Istnieje wtyczka JQuery o nazwie jquery.copy, która umożliwia kopiowanie i wklejanie w różnych przeglądarkach za pomocą pliku flash (swf). Jest to podobne do działania wyróżniacza składni na moim blogu.

Po odwołaniu się do pliku jquery.copy.js wszystko, co musisz zrobić, aby wypchnąć dane do schowka, to:

$.copy("some text to copy");

Miło i łatwo;)