6

Eu tenho uma página e quero permitir a cópia normalmente, mas gostaria que elementos específicos não fossem copiados após usar Ctrl+A e Ctrl+C, por exemplo formulários, menus de navegação e banners de propaganda.

Isso porque o conteudo geralmente é o que interessa se alguém quiser copiar, mas o navbar não é interessante.

Eu tentei isto:

form, nav {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
  -webkit-touch-callout: none;
            user-select: none;
}

Mas se eu pressionar Ctrl+A e Ctrl+C os formulários e o navbar são copiados juntos de qualquer maneira.

Existe alguma maneira de prevenir a copia de elementos específicos após o uso de Ctrl+A?

5

1 Resposta 1

4

Após alguns testes, encontrei soluções com :before {} e content: ""; do CSS, mas isto só funciona pra texto simples, então resolvi testar o evento oncopy do javascript.

Consegui assim, usando os eventos copy, beforecopy, a propriedade display: none e document.querySelectorAll pra pegar os elementos (não precisa colocar no onload).

Suporte

  • Firefox
  • Chrome
  • Internet Explorer 10+

Código de exemplo

(function (d) {
    if (d.addEventListener && d.querySelectorAll) {
        //Edite esta variável conforme a necessidade (elementos que deseja impedir que sejam copiados)
        var query = "nav, form";

        //Nota: no IE a tag script é copiada, então prefira deixar sempre ele
        query += ", script";

        var running = false;

        function finishEventCopy() {
            running = false;
        }

        //Oculta os elementos pra não serem copiados
        function preventEventCopy(e) {
            if (running) return;

            running = true;

            //Clona o body
            var cloned = document.body.cloneNode(true);

            //Cria elemento temporário que será selecionado pelo range
            var tmpNode = document.createElement("div");
            var els = cloned.querySelectorAll(query);

            for (i = 0, j = els.length; i < j; i++) {
                els[i].parentNode.removeChild(els[i]);
            }

            //Cria um elemento vazio pra ajustar o range de maneira mais fácil
            var empty = document.createElement("div");
            empty.innerHTML = " ";

            tmpNode.appendChild(cloned);
            tmpNode.appendChild(empty);

            document.body.appendChild(tmpNode);

            //define o range no DIV temporário
            var range = document.createRange();
            range.setStart(tmpNode.firstChild, 0);
            range.setEnd(empty, 1);

            //Seleciona o div temporário
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);

            //Executa o comando de cópia
            document.execCommand("copy");

            document.body.removeChild(tmpNode);

            empty = range = sel = tmpNode = null;

            setTimeout(finishEventCopy, 10);
        }

        function triggerByKeyboard(e) {
            if (e.ctrlKey && e.keyCode == 67) preventEventCopy(e);
        }

        d.addEventListener("beforecopy", preventEventCopy, false);
        d.addEventListener("copy", preventEventCopy, false);
        d.addEventListener("keydown", triggerByKeyboard, false);
    }
})(document);
<nav>
Navegação
</nav>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor orci at purus elementum feugiat. Ut sed ipsum tempor, consequat tortor in, egestas metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In viverra volutpat tellus ullamcorper condimentum. In pharetra mauris vel neque congue consectetur. Maecenas semper accumsan dictum. Nam augue lectus, consequat ut sapien id, sollicitudin auctor sapien. Curabitur libero sapien, egestas eu mauris ut, aliquet pharetra orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sapien tortor, viverra eget leo vel, pellentesque iaculis velit. Praesent vehicula, erat sit amet fermentum scelerisque, justo lorem gravida orci, ut euismod nisi nibh a dolor. Mauris in pellentesque sapien. Sed lobortis magna quam, in sodales ante pulvinar et. Pellentesque et rhoncus orci, in blandit elit.
</div>

<form>
Formulário
</form>


Desabilitando copia da página toda

Talvez se tiver a necessidade de prevenir a copia completa pode usar algo como:

function blockCopy(e) {
    e.preventDefault();
    e.stopPropagation();
}

function blockPressCtrlC(e) {
    if (e.ctrlKey && e.keyCode == 67) {
        blockCopy(e);
    }
}

document.addEventListener("copy", blockCopy, false);
document.addEventListener("beforecopy", blockCopy, false);

document.addEventListener("keydown", blockPressCtrlC, false);

Mas note isso não é infalível, apenas dificulta a copia do conteúdo, mas é possível ainda sim burlar.


Uma resposta relacionada com isto que pode ser útil é:

4
  • O simples fato do elemento esta com display:none; faz com que ele não seja copiado? oO 8/04/2016 às 19:42
  • Função anonima no addEventListener? quero ver você cancelar isso depois :D 8/04/2016 às 19:54
  • @GuilhermeLautert quer dizer remover o evento? Mas tem algum objetivo pra remove-lo?
    – Reptile
    8/04/2016 às 19:58
  • Isso depende de suas necessidade, eu só tava brincando. 8/04/2016 às 20:02

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 .