In JavaScript esistono due approcci per gestire l'operazione di copia del testo nella clipboard.
Il primo approccio che fa uso del metodo document.execCommand() non presenta problemi di compatibilità tra browser.
'use strict';
const input = document.querySelector('#text');
const copyBtn = document.querySelector('#copy-btn');
copyBtn.addEventListener('click', () => {
input.select();
document.execCommand('copy');
}, false);
Qui l'utente copia il valore inserito nel campo di input. Per i browser mobile è necessario un passaggio in più per garantire la compatibilità.
'use strict';
const input = document.querySelector('#text');
const copyBtn = document.querySelector('#copy-btn');
copyBtn.addEventListener('click', () => {
input.select();
input.setSelectionRange(0, 99999);
document.execCommand('copy');
}, false);
Il secondo approccio, più moderno, fa uso della Clipboard API, ma:
The asynchronous Clipboard API methods are a recent addition to the specification, and may not be fully implemented to the specification in all browsers.
Si raccomanda quindi di adottare il primo approccio in attesa di un supporto più coerente nei browser.