Copia negli appunti senza Flash

Ho trovato molte soluzioni per la copia negli appunti, ma tutte con flash o per siti web. Sto cercando il metodo di copia negli appunti automaticamente, senza flash e per lato utente, è per gli script degli utenti e, naturalmente, per il browser incrociato.

Senza flash, semplicemente non è possibile nella maggior parte dei browser. Gli appunti dell'utente sono una risorsa rilevante per la sicurezza poiché potrebbero contenere cose come password o numeri di carte di credito. Pertanto, i browser giustamente non consentono l'accesso Javascript (alcuni lo consentono con un avviso mostrato che l'utente ha confermato, o con codice Javascript firmato, ma nessuno di questi è cross-browser).

Avevo provato la soluzione flash e anche a me non piaceva. Troppo complesso e troppo lento. Quello che ho fatto è stato creare un'area di testo, inserire i dati in quella e utilizzare il comportamento del browser "CTRL + C".

La parte jQuery javascript:

// 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);

La parte HTML:
<textarea id="textArea1"></textarea>

Ora, metti quello che vuoi copiare in 'METTI IL TESTO DA COPIARE QUI. PUO 'ESSERE UNA FUNZIONE.' la zona. Funziona bene per me me. Devi solo creare una combinazione CTRL + C. L'unico inconveniente è che avrai una brutta area di testo visualizzata nel tuo sito. Se usi style = "display: none" la soluzione di copia non funzionerà.

clipboard.js è stato appena rilasciato per essere copiato negli appunti senza bisogno di Flash

Guardalo in azione qui> http://zenorocha.github.io/clipboard.js/#example-action

È finalmente arrivato! (Finché non supporti Safari o IE8 ... -_-)

Ora puoi effettivamente gestire le azioni degli appunti senza Flash. Ecco la documentazione pertinente:

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

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

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

^{Mentre attendo con impazienza il supporto Xbrowser dell'API Clipboard ...}

IE richiederà all'utente solo una volta di accedere agli Appunti.
Safari (5.1 al momento della scrittura) non supporta execCommandpercopy/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>

Tutti i browser (tranne Firefox che è in grado di gestire solo il tipo MIME "plain/text"per quanto ho testato) non hanno implementato l' API degli Appunti . Cioè, provando a leggere l'evento degli appunti in Chrome usando

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

genera: Uncaught TypeError: Illegal constructor

La migliore risorsa dell'incredibile casino che sta accadendo tra i browser e gli Appunti può essere vista qui (caniuse.com) (→ Segui i commenti sotto "Note" ).
MDN dice che il supporto di base è "(YES)" per tutti i browser, il che è impreciso perché ci si aspetterebbe che almeno l'API funzioni.

È possibile utilizzare una clipboard locale nella pagina HTML. Ciò consente di copiare / tagliare / incollare contenuti ALL'INTERNO della pagina HTML, ma non da / verso applicazioni di terze parti o tra due pagine HTML.

Ecco come puoi scrivere una funzione personalizzata per farlo (testata in chrome e firefox):

Ecco il FIDDLE che dimostra come puoi farlo.

Incollerò anche il violino qui come riferimento.

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')farà quello che vuoi. Ma non c'erano esempi utilizzabili direttamente in questo thread senza cruft, quindi eccolo qui:

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')

Non c'è modo di aggirare, devi usare il flash. Esiste un plug-in JQuery chiamato jquery.copy che ha fornito copia e incolla cross browser utilizzando un file flash (swf). Questo è simile a come funziona l'evidenziatore di sintassi sul mio blog.

Dopo aver fatto riferimento al file jquery.copy.js, tutto ciò che devi fare per inserire i dati negli appunti è eseguire quanto segue:

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

Bello e facile ;)