Obter conteúdo atual da área de transferência? [fechadas]

106

Gostaria de saber uma maneira de fazer meu script detectar o conteúdo da área de transferência e colá-lo em um campo de texto quando a página for aberta, sem entrada do usuário. Como pode ser feito?

Gabriele Cirulli
fonte
Você não pode realmente saber o que está na área de transferência de um usuário, a menos que tenha usado algum tipo de back-end em flash quando eles copiarem o texto. ------- Atualização: Uma resposta mais correta aqui
Naftali, também conhecido como Neal

Respostas:

74

window.clipboardData.getData('Text')funcionará em alguns navegadores. No entanto, muitos navegadores nos quais funciona perguntarão ao usuário se ele deseja ou não que a página da web tenha acesso à área de transferência.

Dave
fonte
17
Isso funcionará em qualquer navegador diferente do Internet Explorer?
Anderson Green
6
Provavelmente não. Veja esta pergunta: stackoverflow.com/questions/400212/…
Dave
7
Você pode verificar a compatibilidade aqui caniuse.com/#search=clipboardData
Sergey Novikov
1
Uma solução melhor é obter pelo objeto do nó, mas não pelo objeto da janela. Veja aqui
rplaurindo
66

Use a nova API da área de transferência , via navigator.clipboard. Ele pode ser usado assim:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Ou com sintaxe assíncrona:

const text = await navigator.clipboard.readText();

Lembre-se de que isso exibirá ao usuário uma caixa de diálogo de solicitação de permissão, portanto, nenhum negócio engraçado será possível.

(NOTA: Isso não funcionará se chamado do console, mas exigirá uma ação direta do usuário, como pressionar um botão, obrigado @Artur)

Mais sobre isso

Spec

iuliu.net
fonte
18
Observe que sempre resulta em erro quando chamado do console. Mas faz o trabalho em uma ação direta do usuário, como quando você pressiona um botão na página.
Klesun
isso parece retornar apenas texto simples ... mesmo quando o rich text está na área de transferência. como posso fazer isso? \
Michael
@Michael, suporte para imagens e outros acabou de ser adicionado na última versão do Chrome (76)
iuliu.net
Você pode testar no console envolvendo um setTimeoute clicando novamente na página.
Edbentley
18

Você pode usar

window.clipboardData.getData('Text')

para obter o conteúdo da área de transferência do usuário no IE. No entanto, em outro navegador, você pode precisar usar o flash para obter o conteúdo, uma vez que não existe uma interface padrão para acessar a área de transferência. Pode ser que você possa experimentar este plugin Zero Clipboard

Ricky Jiao
fonte
1
o link está funcionando bem (novamente)
stephanos
5
ZeroClipboard permite apenas copiar para a área de transferência, não ler a partir dela.
DSimon
4

A seguir, você encontrará o conteúdo selecionado e também a atualização da área de transferência.

Vincule o id do elemento com o evento de cópia e, em seguida, obtenha o texto selecionado. Você pode substituir ou modificar o texto. Pegue a área de transferência e defina o novo texto. Para obter a formatação exata, você precisa definir o tipo como "text / hmtl". Você também pode vinculá-lo ao documento em vez de ao elemento.

      $(ElementId).bind('copy', function(event) {
        var selectedText = window.getSelection().toString(); 
        selectedText = selectedText.replace(/\u200B/g, "");

        clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
        clipboardData.setData('text/html', selectedText);

        event.preventDefault();
      });
Sollymanul Islam
fonte
20
Bem vindo a este site! Fico feliz que você esteja contribuindo respondendo a uma pergunta. Mas esteja ciente de que sua resposta não responde realmente à pergunta do OP. A questão é recuperar o conteúdo da área de transferência e colá-lo em algum lugar ao abrir uma página. Além disso, como a pergunta não tem uma tag jquery , as respostas com jQuery devem conter uma observação de que uma biblioteca (jQuery) é usada.
KarelG