Azionare la copia di un testo con pulsante da Javascript

Creare un pulsante per facilitare la copia dei campi di testo

Stavo migliorando l’uso del nostro generatore di password, quando mi sono accorto che forse un pulsante in grado di copiare il contenuto del campo di testo dove risiede la nuova password può essere molto comodo ed utile. Si, perché selezionare tutto il campo e premere la combinazione Ctrl+C sicuramente è meno comodo del clic su un pulsante dedicato.

Andiamo a creare la nostra procedura.

Aggiungiamo alla nostra pagina la seguente funzione in javascript

function copia_js(campo) {
    var input = document.createElement('input');
    var area = document.getElementById(campo).value;
    input.setAttribute('value', area);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

adatta all’uso sia di input di tipo text che area, dopodiché andiamo ad aggiungerla come azione all’onclick di un tipo button, come in questo modo

<div>
   <input id="campoditesto" type="text">
   <button onclick="copia_js('campoditesto')">Copia</button>
</div>

Al click del pusante, il contenuto del campo identificato con campoditesto sarà copiato negli appunti del pc, pronto per essere incollato ovunque noi vogliamo.