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