{"id":40151,"date":"2019-07-11T12:32:39","date_gmt":"2019-07-11T12:32:39","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=35312\/"},"modified":"2019-08-22T00:00:35","modified_gmt":"2019-07-12T05:50:34","slug":"copy-to-clipboard-in-javascript","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/pt-br\/dicas\/copy-to-clipboard-in-javascript\/","title":{"rendered":"Copy to clipboard in JavaScript"},"content":{"rendered":"

Objetivos do blog<\/h2>\n

Ap\u00f3s a leitura deste blog, voc\u00ea ser\u00e1 capaz de saber como os dados podem ser copiados para a \u00e1rea de transfer\u00eancia com a ajuda do script java.<\/p>\n

Benef\u00edcio da c\u00f3pia para a funcionalidade da \u00e1rea de transfer\u00eancia<\/h3>\n

No mundo da web atual, \u00e9 tudo sobre o usu\u00e1rio experiente em seu site. Durante nosso trabalho em qualquer site, copiamos o conte\u00fado de um lugar e colamos em outro lugar. Ser\u00e1 realmente \u00fatil para o usu\u00e1rio se um site fornecer uma funcionalidade de clique para copiar. Isso economiza tempo e esfor\u00e7o do usu\u00e1rio para selecionar e copiar o conte\u00fado.<\/p>\n

Implementa\u00e7\u00e3o da funcionalidade copiar para a \u00e1rea de transfer\u00eancia<\/h3>\n

Vamos ver como podemos adicionar essa funcionalidade:<\/p>\n

– <\/h4>\n

Crie um HTML com um par\u00e1grafo com algum conte\u00fado e bot\u00e3o para clicar. Voc\u00ea pode usar qualquer elemento relevante em vez de par\u00e1grafo, por exemplo, caixa de texto, \u00e1rea de texto, campos ocultos etc.<\/p>\n

<body> <p id = "txt_knoband"> A KnowBand se orgulha dos melhores plug-ins do mercado para sistemas de com\u00e9rcio eletr\u00f4nico e tem anos de experi\u00eancia trabalhando com sites de com\u00e9rcio eletr\u00f4nico. <\/ p> <button onclick = "onClickCopy ()"> Copiar texto < \/ bot\u00e3o> <\/ body><\/pre>\n
– <\/h4>\n
Voc\u00ea precisar\u00e1 criar uma fun\u00e7\u00e3o onClickCopy () que copiar\u00e1 os dados do par\u00e1grafo. A fun\u00e7\u00e3o simplesmente executar\u00e1 "document.execCommand (" copy ")" para copiar os dados para a \u00e1rea de transfer\u00eancia.<\/p>\n
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"); }<\/pre>\n
In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.<\/p>\n
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.<\/p>\n
Related Article: Como definir o cookie usando JavaScript<\/a>