Copy to clipboard in JavaScript

Objetivos do blog

Após a leitura deste blog, você será capaz de saber como os dados podem ser copiados para a área de transferência com a ajuda do script java.

Benefício da cópia para a funcionalidade da área de transferência

No mundo da web atual, é tudo sobre o usuário experiente em seu site. Durante nosso trabalho em qualquer site, copiamos o conteúdo de um lugar e colamos em outro lugar. Será realmente útil para o usuário se um site fornecer uma funcionalidade de clique para copiar. Isso economiza tempo e esforço do usuário para selecionar e copiar o conteúdo.

Implementação da funcionalidade copiar para a área de transferência

Vamos ver como podemos adicionar essa funcionalidade:

Crie um HTML com um parágrafo com algum conteúdo e botão para clicar. Você pode usar qualquer elemento relevante em vez de parágrafo, por exemplo, caixa de texto, área de texto, campos ocultos etc.

<body> <p id = "txt_knoband"> A KnowBand se orgulha dos melhores plug-ins do mercado para sistemas de comércio eletrônico e tem anos de experiência trabalhando com sites de comércio eletrônico. </ p> <button onclick = "onClickCopy ()"> Copiar texto < / botão> </ body>

Você precisará criar uma função onClickCopy () que copiará os dados do parágrafo. A função simplesmente executará "document.execCommand (" copy ")" para copiar os dados para a área de transferência.

function copyOnClick () {var tempInput = document.createElement ("entrada"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand ("copy"); document.body.removeChild (tempInput); alerta ("valor copiado"); }

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: Como definir o cookie usando JavaScript


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *