Copiare il testo negli appunti da pulsante – Funzioni HTML&JS

In questa guida imparerai a creare una funziona JavaScript per copiare il testo negli appunti / clip-board del PC o dispositivo (nella memoria del dispositivo), facendo click su di un pulsante HTML, senza dover selezionare e copiare manualmente il testo.

Probabilmente durante la navigazione in diversi siti web, ti sei imbattuto nella funzione per copiare il testo negli appunti del PC o smartphone, così da lasciare nella memoria del computer la stringa di testo da poter incollare successivamente. Tramite un singolo click del mouse su un apposito pulsante (button) HTML hai potuto copiare la porzione di testo desiderata, così da poter essere poi riutilizzata altrove.

Questa funzionalità risulta molto comoda, consente di risparmiare tempo ed evita l’omissione dei caratteri durante la selezione del testo. Può essere sviluppata con JavaScript per una facile integrazione nelle pagine web di un sito.

In questa guida ora ti mostrerò come fare, così da poter copiare i tuoi testi direttamente negli appunti (o clipboard) del tuo dispositivo con JS e HTML. Segui questa facile guida passo per passo e in breve tempo potrai goderti la tua nuova funzione.

Non è fondamentale conoscere JavaScript per integrare la funzione, ma si consiglia un minimo di esperienza con HTML e (possibilmente) di CSS, così da impostare tutto correttamente ed evitare problematiche.
Non faremo uso di CSS qui, puoi personalizzare lo stile degli oggetti in completa libertà.
Per informazioni segui il nostro corso HTML e CSS gratuito.

Funzione per copiare il testo negli appunti del dispositivo da pulsante

La guida si divide in due fasi:

1. La prima per la creazione degli elementi HTML. In questo caso faremo uso del tag “button” (puoi usare anche il tag “a” o “input” a tua scelta) e di un’area di testo (textarea) nel quale inserire la stringa da copiare.
2. La seconda fase per JavaScript, con la funzione vera e propria.

A fondo pagina troverai un esempio pratico.

HTML

Come accennato precedentemente, con l’HTML creeremo due elementi, la textarea e il button.

Nell’area di testo verrà scritto il valore di esempio da copiare nella clipboard del dispositivo in uso; con il pulsante azioneremo la funzione per copiare.

Qui il codice:

<div>
   <textarea id="area">Ciao mondo!</textarea>
   <button >

Come puoi notare, nel tag “button” abbiamo già definito la funzione copia(), che preleverà il valore di testo contenuto nell’elemento con l’id “area”, ovvero la textarea.

I due elementi sono contenuti in un tag “div” per migliorarne la leggibilità. Può essere omesso.

JavaScript

Il listato JavaScript si compone di diverse stringhe, con il compito di prelevare i dati (valore testuale) dall’elemento “textarea” e copiarlo negli appunti, dopo aver fatto click sul tasto “copia“. Ad operazione completata verrà notificato un alert di conferma.

Questo è il codice JS:

  function copia(testo) {
    var input = document.createElement('input');
    var area = document.getElementById(testo).value;
    input.setAttribute('value', area);
    document.body.appendChild(input);
    input.select();
    var risultato = document.execCommand('copy');
    document.body.removeChild(input);
    alert('testo copiato: '+ area);
    return risultato;
 }

Puoi rimuovere l’alert se vuoi, basta cancellare la penultima riga del listato.

Per una migliore gestione della pagina, ti conviene integrare il codice JS in un file esterno o nel foot della tua pagina web (sezione inferiore della pagina, prima della chiusura del tag body).

Copia e incolla entrambi i blocchi di codice HTML e JS nel tuo sito e inizia ad usare la funzione.

Esempio

Testa qui il funzionamento della funzione: scrivi un testo personalizzato, clicca su “copia“, poi incollalo di nuovo.

Copiare testo negli appunti da più elementi di input

Fino ad ora abbiamo spiegato come poter copiare il testo da un singolo elemento HTML textarea, un’area di testo base, grazie alla selezione del sul “id”. La funzione mostrata infatti, sia adatta bene per una selezione singola; tuttavia, se si cerca di copiare negli appunti il testo di più elementi di input questa non fa al caso nostro e meriterebbe una ritoccatina.

Per selezionare più elementi di testo HTML, sarà necessario agire su un selettore di tipo “class” e aggiungere un ciclo “For” JavaScript per ottenere i valori testuali contenuti negli elementi interessati.

Il codice da utilizzare è il seguente:

<div>
  <label>Input1</label>
  <input class="copyMe" type="text">
  <br>
  <label>Input2</label>
  <input class="copyMe" type="text">
   <button >

function copia(inp) {
  var input = document.createElement('input');
  var aree = document.getElementsByClassName(inp);
  var concatText = "";
  for(i = 0; i < aree.length; i++){
    concatText += aree[i].value + " ";
  }
  input.setAttribute('value', concatText);
  document.body.appendChild(input);
  input.select();
  var risultato = document.execCommand('copy');
  document.body.removeChild(input);
  alert('testo copiato: '+ concatText);
  return risultato;
}

Il codice restituirà il testo concatenato di tutti gli input presenti con classe “copyMe“. Per aggiungere ulteriori inputs, basta copiare l’apposito tag <input> in un’altra posizione del documento HTML e la funzione avrà effetto comunque anche sul nuovo elemento.

Leggi anche: Come creare un menu a comparsa HTML e JS

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle