0

Para copiar o valor de um elemento span cujo ID é igual a "nome", após clicar em um button, eu estou fazendo assim, por exemplo:

        function copiar() {                        
        const element = document.getElementById('nome');
        var range = document.createRange();
        range.selectNodeContents(element);
        window.getSelection().addRange(range);
        document.execCommand("copy");               
        }

Porém, tenho outro span cujo ID é igual a "sobrenome" e gostaria de copiar simultaneamente ao clicar no button.

3 Respostas 3

2

AVISO:

Até a data, 31/12/2019, em que foi escrita essa resposta essa solução somente é compatível com os navegadores baseados no Chromium, Firefox e Opera. A resposta é baseada em tecnologia considerada até o momento recente e ainda não foi totalmente implementa entre os navegadores.

W3C | Clipboard API and events

Can I Use | Clipboard API: writeText

Webkit API Improvements | Clipboard API Improvements


Uma alternativa seria utilizar a API da Area de transferência para fazer a cópia das informações.

Sua documentação a descreve:

A API da área de transferência fornece a capacidade de responder aos comandos da área de transferência (recortar, copiar e colar), além de ler e gravar de forma assíncrona na área de transferência do sistema.

Esta API foi projetada para substituir o acesso à área de transferência usando document.execCommand().

Essa API adiciona a interface Navigator a propriedade de leitura clipboard que retorna o objeto Clipboard usado para ler e gravar o conteúdo na área de transferência.

Lembrando que:

O acesso ao conteúdo da área de transferência é bloqueado por trás da API de permissões ; sem permissão do usuário, não é permitido ler ou alterar o conteúdo na área de transferência.

Para gravar uma string na area de transferência usa-se o método writeText()

function copiar() {

  let nome = document.getElementById('Nome').innerText;
  let sobrenome = document.getElementById('Sobrenome').innerText;

  navigator.clipboard.writeText(nome + " " + sobrenome)
    .then(
      function() {
        console.log(" Os dados foram copiados.")
      },
      function() {
        console.error("Houve um problema ao copiar os dados.")
      });
}
<div>
  <label>Nome:</label>
  <span id="Nome">Augusto</span>
</div>
<div>
  <label>Sobrenome:</label>
  <span id="Sobrenome">Vasques</span>
</div>
<br>
<input type="button" onclick="copiar()" value="Copiar">

1
  • 1
    muito obrigado pela resposta. E, depois de muito pesquisar, a solução abaixo também parece viável, pois seleciona o texto copiado, indicando visualmente ao usuário os dados copiados. É interessante..
    – Daniel
    1/01/2020 às 14:51
0

Esta alternativa:

function copiar() {
        window.getSelection().removeAllRanges(range);
        const element = document.querySelectorAll(".nomesobrenome");
        var range = document.createRange();
        range.setStartBefore(element[0]);
        range.setEndAfter(element[1]);
        const selection = window.getSelection();
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }
     <div>
      <label>Nome:</label>
      <span id="Nome" class="nomesobrenome">Augusto</span>
    </div>
    <div>
      <label>Sobrenome:</label>
      <span id="Sobrenome" class="nomesobrenome">Vasques</span>
    </div>
    <br>
    <input type="button" onclick="copiar()" value="Copiar">

-1
function copiarSPAN() {
    const span = document.querySelectorAll('span');
    const range = new Range();
    range.setStartBefore(span[1]);
    range.setEndAfter(span[2]);
    const selection = window.getSelection();
    selection.addRange(range);
    document.execCommand("copy");
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .