After some tests, I found solutions with :before {} and content: ""; of CSS, but this only works for plain text, so I decided to test the oncopy of javascript event.
I have thus been able to use the copy , beforecopy events, the display: none and document.querySelectorAll property to get the elements (do not need to onload ).
Support
- Firefox
- Chrome
- Internet Explorer 10 +
Sample Code
(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>
Disabling Full Page Copy
Maybe if you need to prevent full copying you can use something like:
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);
But note this not is infallible, it only makes it difficult to copy content, but you can still cheat.
A related answer to this that might be helpful is:
