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?


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.


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


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


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();
      });

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.