{"id":15092,"date":"2023-12-22T10:06:32","date_gmt":"2023-12-22T13:06:32","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15092"},"modified":"2023-12-22T10:07:26","modified_gmt":"2023-12-22T13:07:26","slug":"html-usar-javascript-para-copiar-ao-clicar-um-texto","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15092","title":{"rendered":"HTML: Usar JavaScript para Copiar ao clicar um texto"},"content":{"rendered":"\n

Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.<\/p>\n\n\n\n

\u00c9 muito importante saber como usar JavaScript para copiar ao clicar em certo elemento ou tag do site pois isso oferece aos usu\u00e1rios uma forma conveniente e mais r\u00e1pida para colar o item, sem a necessidade de selecionar e copiar manualmente.<\/p>\n\n\n

\n
\"HTML:
HTML: Usar JavaScript para Copiar ao clicar um texto<\/figcaption><\/figure><\/div>\n\n\n

Nesse exemplo iremos copiar o conte\u00fado de um campo de tabela. Mais precisamente, o texto dentro de um <td><\/td><\/strong>. Quando clicar em um nome de fruta ele ser\u00e1 copiado.<\/p>\n\n\n\n

Veja a tabela que usaremos como exemplo:<\/p>\n\n\n\n

<<\/font>table<\/font> <\/font>border<\/font>=<\/font>"1"<\/font>><\/font>\n    <<\/font>thead<\/font>><\/font>\n        <<\/font>tr<\/font>><\/font>\n            <<\/font>th<\/font>><\/font>Fruta<\/<\/font>th<\/font>><\/font>\n            <<\/font>th<\/font>><\/font>Valor<\/<\/font>th<\/font>><\/font>\n        <\/<\/font>tr<\/font>><\/font>\n    <\/<\/font>thead<\/font>><\/font>\n    <<\/font>tbody<\/font>><\/font>\n        <<\/font>tr<\/font>><\/font>\n            <<\/font>td<\/font>><<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>onclick="copiarItem<\/font>(1)"<\/font>><\/font>Manga<\/u><\/font><\/<\/font>a<\/font>><\/<\/font>td<\/font>><\/font>\n            <<\/font>td<\/font>><\/font>R$ 8,00<\/<\/font>td<\/font>><\/font>\n        <\/<\/font>tr<\/font>><\/font>\n        <<\/font>tr<\/font>><\/font>\n            <<\/font>td<\/font>><<\/font>a<\/font> <\/font>href<\/font>=<\/font>"#"<\/font> <\/font>onclick="copiarItem<\/font>(2)"<\/font>><\/font>Goiaba<\/u><\/font><\/<\/font>a<\/font>><\/<\/font>td<\/font>><\/font>\n            <<\/font>td<\/font>><\/font>R$ 5,00<\/<\/font>td<\/font>><\/font>\n        <\/<\/font>tr<\/font>><\/font>\n    <\/<\/font>tbody<\/font>><\/font>\n<\/<\/font>table<\/font>><\/font>\n<\/pre>\n\n\n\n
Vaja acima o evento onclick que est\u00e1 dentro de um link:  href=”#” onclick=”copiarItem()”<\/strong><\/p>\n\n\n\n
Ao clicar nesse link ser\u00e1 chamada uma fun\u00e7\u00e3o chamada copiarItem<\/strong>, passando um valor, em nosso caso, passa 1 ou 2.<\/p>\n\n\n\n
A seguir, posto o conte\u00fado completa da fun\u00e7\u00e3o.<\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n    <\/font>function<\/font> copiarItem<\/font>(rowIndex<\/font>) <\/font>{<\/font>\n        <\/font>\/\/ Obter a refer\u00eancia da c\u00e9lula que voc\u00ea deseja copiar<\/font>\n        <\/font>var<\/font> tabela = <\/font>document<\/font>.querySelector<\/font>('table'<\/font>);<\/font>\n        <\/font>var<\/font> linha = tabela.rows<\/font>[<\/font>rowIndex<\/font>]<\/font>;<\/font>\n        <\/font>var<\/font> celula = linha.cells<\/font>[<\/font>0]<\/font>; <\/font>\/\/ Neste exemplo, estamos copiando a primeira c\u00e9lula da linha<\/font>\n\n        <\/font>\/\/ Criar um elemento de \u00e1rea de transfer\u00eancia tempor\u00e1ria<\/font>\n        <\/font>var<\/font> tempInput = <\/font>document<\/font>.createElement<\/font>('input'<\/font>);<\/font>\n        tempInput.value = celula.textContent;<\/font>\n\n        <\/font>\/\/ Adicionar o elemento de \u00e1rea de transfer\u00eancia \u00e0 p\u00e1gina<\/font>\n        <\/font>document<\/font>.body.appendChild<\/font>(tempInput<\/font>);<\/font>\n\n        <\/font>\/\/ Selecionar e copiar o conte\u00fado da \u00e1rea de transfer\u00eancia<\/font>\n        tempInput.select<\/font>();<\/font>\n        <\/font>document<\/font>.execCommand<\/font>('copy'<\/font>);<\/font>\n\n        <\/font>\/\/ Remover o elemento de \u00e1rea de transfer\u00eancia tempor\u00e1ria<\/font>\n        <\/font>document<\/font>.body.removeChild<\/font>(tempInput<\/font>);<\/font>\n\n        <\/font>alert<\/font>('Item copiado: '<\/font> + celula.textContent<\/font>);<\/font>\n    <\/font>}<\/font>\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
\u00c9 bom entendermos o que faz a linha var celula = linha.cells[0];<\/strong> acima. Ela faz com que o conte\u00fado da primeira linha seja copiado. Ou seja, se alterarmos de 0<\/strong> para 1<\/strong> ent\u00e3o ao clicarmos em Manga<\/strong> ser\u00e1 copiado R$ 8,00<\/strong> e se clicarmos em Goiaba<\/strong> ser\u00e1 copiado R$ 5,00<\/strong>.<\/p>\n\n\n\n
O restante da tabela est\u00e1 bem explicado nos coment\u00e1rios.<\/p>\n\n\n\n
Inserir uma alert()<\/strong> apanas para n\u00e3o termos que mostrar colando o conte\u00fado nesse exemplo.<\/p>\n\n\n\n
Veja mais posts sobre HTML clicando aqui.<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela. \u00c9 muito importante saber como usar JavaScript para copiar ao clicar em certo elemento ou tag do site pois isso oferece aos usu\u00e1rios uma forma conveniente e mais r\u00e1pida para colar o item, sem…<\/p>\n
Read More “HTML:  Usar JavaScript para Copiar ao clicar um texto”<\/span> »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[669],"tags":[670,4749],"class_list":["post-15092","post","type-post","status-publish","format-standard","hentry","category-html","tag-html","tag-javascript"],"yoast_head":"\nHTML: Usar JavaScript para Copiar ao clicar um texto - Categoria Outros<\/title>\n<meta name=\"description\" content=\"Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=15092\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML: Usar JavaScript para Copiar ao clicar um texto - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=15092\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-22T13:06:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-22T13:07:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/contas-usuarios.jpeg\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15092#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15092\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"HTML: Usar JavaScript para Copiar ao clicar um texto\",\"datePublished\":\"2023-12-22T13:06:32+00:00\",\"dateModified\":\"2023-12-22T13:07:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15092\"},\"wordCount\":244,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"html\",\"JavaScript\"],\"articleSection\":[\"html\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15092#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15092\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=15092\",\"name\":\"HTML: Usar JavaScript para Copiar ao clicar um texto - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2023-12-22T13:06:32+00:00\",\"dateModified\":\"2023-12-22T13:07:26+00:00\",\"description\":\"Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15092#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15092\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15092#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML: Usar JavaScript para Copiar ao clicar um texto\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML: Usar JavaScript para Copiar ao clicar um texto - Categoria Outros","description":"Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/categoriaoutros.com.br\/?p=15092","og_locale":"pt_BR","og_type":"article","og_title":"HTML: Usar JavaScript para Copiar ao clicar um texto - Categoria Outros","og_description":"Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.","og_url":"https:\/\/categoriaoutros.com.br\/?p=15092","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2023-12-22T13:06:32+00:00","article_modified_time":"2023-12-22T13:07:26+00:00","og_image":[{"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/contas-usuarios.jpeg"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=15092#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15092"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"HTML: Usar JavaScript para Copiar ao clicar um texto","datePublished":"2023-12-22T13:06:32+00:00","dateModified":"2023-12-22T13:07:26+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15092"},"wordCount":244,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["html","JavaScript"],"articleSection":["html"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=15092#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=15092","url":"https:\/\/categoriaoutros.com.br\/?p=15092","name":"HTML: Usar JavaScript para Copiar ao clicar um texto - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2023-12-22T13:06:32+00:00","dateModified":"2023-12-22T13:07:26+00:00","description":"Nesse post iremos ver como usar JavaScript para copiar ao clicar em algum elemento HTML qualquer. Veja exemplos usando uma tabela.","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15092#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=15092"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=15092#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"HTML: Usar JavaScript para Copiar ao clicar um texto"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15092"}],"version-history":[{"count":4,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15092\/revisions"}],"predecessor-version":[{"id":15096,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15092\/revisions\/15096"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}