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
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!