Olá, pessoal!
Mais uma dica rápida de javascript aqui hoje.
Se você quiser criar um botão de copiar, aquele famoso CTRL + C com JavaScript você pode fazer isso de forma rápida e fácil, deixando a sua aplicação com um detalhe a mais na usabilidade.
Basta usar o document.execCommand('copy'); , e o mesmo também vale para o cut e o paste.
Copy (CTRL + C) com JavaScript
Código completo:
O código completo apenas é exibido no desktop, pois a leitura fica mais fácil, mas você pode acessar tambem pelo link direto do Gist.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <input id="text" /> | |
| <button id="copy">Copy</button> | |
| <script type="text/javascript"> | |
| const textInput = document.getElementById('text'); | |
| const copyButton = document.getElementById('copy'); | |
| copyButton.addEventListener('click', ()=> { | |
| textInput.select(); | |
| document.execCommand('copy'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
by Obriagado pela leitura, compartilhe!
Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos serguir nas redes sociais, por que você não pode ficar de fora!
- Faça parte da nossa lista de Desenvolvedores ?
- Se inscreva em nosso canal do Youtube ?
- Curta nossa página no Facebook ?
- Não perca as atualizações no Twitter ?
- Veja as dicas no Instagram ?
- Siga nossos repositórios no Github
3 Comments
Everton F.Costa Souza · 2020-04-27 at 09:41
Bacana , Emerson estou voltando rever javascript e vou tentar aplicar no react isso TB pois é javascript acredito que aceita .
Gustavo Ferraz · 2020-06-04 at 14:17
Muito bom, simples e objetivo.
Diego de Oliveira · 2023-05-21 at 01:03
Muito bom, você e muito top, obrigado pela dica.