Knowband Blog | Ecommerce Modules

Copy to clipboard in JavaScript

Obiettivi del blog

Dopo la lettura di questo blog, sarai in grado di sapere come i dati possono essere copiati negli appunti con l'aiuto dello script java.

Vantaggio della funzionalità di copia su Appunti

Nell'attuale mondo del web, si tratta di utenti esperti del tuo sito. Durante il nostro lavoro su qualsiasi sito, copiamo il contenuto da un posto e incolliamo in un altro posto. Sarà molto utile per l'utente se un sito offre una funzionalità di fare clic per copiare. Salva il tempo e lo sforzo dell'utente per selezionare e copiare il contenuto.

Implementazione della funzionalità di copia negli Appunti

Vediamo come possiamo aggiungere questa funzionalità:

Passo 1:

Crea un codice HTML con un paragrafo con contenuti e pulsante per fare clic. Puoi utilizzare qualsiasi elemento rilevante al posto del paragrafo, ad esempio textbox, textarea, campi nascosti ecc.

<body> <p id = "txt_knoband"> KnowBand vanta il meglio dei plug-in di settore per i sistemi di e-commerce e ha anni di esperienza nel lavorare con siti e-commerce. </ p> <button onclick = "onClickCopy ()"> Copia testo < / button> </ body>

Passo 2:

Dovrai creare una funzione onClickCopy () che copierà i dati del paragrafo. La funzione eseguirà semplicemente "document.execCommand (" copy ")" per copiare i dati negli appunti.

function copyOnClick () {var tempInput = document.createElement ("input"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); Document.ExecCommand ( "copia"); document.body.removeChild (tempInput); avviso ("valore copiato"); }

In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: Come impostare i cookie utilizzando JavaScript