Como pegar o conteúdo do clipboard no evento de colar com JS

Neste artigo você vai aprender a como pegar o conteúdo do clipboard no evento de colar em JavaScript, ou seja, ao utilizar o control + v

Fala programador(a), beleza? Bora aprender mais sobre os eventos de JavaScript!

Para realizar esta ação, precisamos do evento paste

Que é disparado exatamente quando utilizamos o ctrl + v, por exemplo

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Para ativar o evento vamos ter que selecionar um elemento também

E com o objeto clipboardData temos a possibilidade de resgatar os dados da clipboard

Veja um exemplo de código:

function getPasteData(e) {

  const clipboardData = e.clipboardData || window.clipboardData;
  const pastedData = clipboardData.getData('Text');

  console.log(pastedData);
}

document.querySelector('#element').addEventListener('paste', getPasteData);

Primeiramente criamos a função, que vai resgatar os dados do evento paste

Nesta função realizamos a criação de duas variáveis, que pegam o objeto clipboardData e depois o texto dentro do clipboard através do método getData

Em console.log você pode ver o resultado do que estava na clipboard

A última linha do código é referente a seleção de elemento, e execução do evento de paste

Ela ativa a nossa função getPasteData

Lembrando que você precisa mudar o seletor do elemento, que neste caso utilizei #element

E há vários métodos para seleção no DOM:

• querySelector;
• querySelectorAll;
• getElementById;
• getElementsByClassName;

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como pegar o conteúdo do clipboard no evento de colar com JavaScript

Utilizamos o objeto clipboardData, que contém os dados da clipboard

E o evento paste, já que queremos resgatar os dados quando o usuário cola em algum local da página

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!