Come posso copiare negli appunti in HTML5 senza usare il flash?

Question

Desidero utilizzare una funzione di copia su clip in HTML5, ma senza utilizzare il flash. È possibile? Come?

ho cercato di implementare una funzione di copia-to-clipboad con JavaScript, ma non funziona:

function Copytoclipboard() { 
    var body = document.body, 
     range, sel; 
    if (document.createRange && window.getSelection) { 
     range = document.createRange(); 
     sel = window.getSelection(); 
     sel.removeAllRanges(); 
     try { 
      range.selectNodeContents(el); 
      sel.addRange(range); 
      document.execCommand('Copy'); 
     } catch (e) { 
      range.selectNode(el); 
      sel.addRange(range); 
      document.execCommand('Copy'); 
     } 
    } else if (body.createTextRange) { 
     range = body.createTextRange(); 
     range.moveToElementText(el); 
     range.select(); 
     range.execCommand('Copy'); 
    } 
} 

Answer 1

È possibile utilizzare il HTML5 clipboard apihttp://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=eh9tM7GHJWF

Ma fanno notare che non tutti i browser pienamente supporto it of now: http://caniuse.com/#feat=clipboard

Answer 2

Non funziona perché richiede un'interazione dell'utente come il clic. Altrimenti, document.execCommand non funzionerà. Potresti anche voler controllare clipboard.js, è una libreria super facile da copiare testo negli appunti che non richiede Flash.

Answer 3

AGGIORNAMENTO: Questa soluzione funziona anche in Safari.

Non penso che ci sia ancora una soluzione per browser non flash per questo. Ecco una soluzione che funziona in almeno le ultime versioni di Chrome, Firefox, ed Edge:

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" /> 
 
<button id="btn">Copy To Clipboard</button>

Nota: Cercando di utilizzare questa soluzione per copiare una stringa vuota o una stringa che è solo gli spazi non funzioneranno.

Answer 4

Se non ti interessa che i contenuti del campo di testo vengano selezionati prima della copia, ecco una soluzione a due linee che funziona almeno in Chrome 56 e Edge, ma scommetto che funzioni anche in altri browser .

function clickListener() { 
 
    document.getElementById('password').select(); 
 
    document.execCommand('copy'); 
 
} 
 

 
document.getElementById('copy_btn').addEventListener('click', clickListener);

<input id=password value="test"> 
 
<button id=copy_btn>Copy</button>

https://jsfiddle.net/uwd0rm08/

Answer 5

funzione per l'inserimento di testo nella clipboard:

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