Как защитить свой контент: предотврати копирование текста на сайте, но с исключениями!

Защитите свой уникальный контент с помощью простого кода для предотвращения копирования текста на сайте.

С этим решением пользователи не смогут выделить и скопировать текст, но в тегах <code>...</code> сохранится возможность копирования. Узнайте, как это реализовать!

See the Pen Защита контента на сайте: код для блокировки копирования текста с исключениями by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="content">
    <p>Это пример текста. Попробуйте его выделить, чтобы увидеть запрет на копирование.</p>
    <code>Это пример кода, который можно копировать.</code>
</div>
 
<div id="tooltip" class="tooltip">Копирование запрещено!</div>

        CSS
 
  
  Показать код CSS
  
         
.content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
}
 
.content code {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    background-color: #f4f4f4;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
 
.tooltip {
    position: absolute;
    display: none;
    background-color: #ff4d4d;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    pointer-events: none;
    transform: translate(-50%, -20px);
    white-space: nowrap;
}
 
/* Анимация появления подсказки */
.tooltip.show {
    display: block;
    animation: fadeIn 0.3s ease;
}
 
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

        JS
       

  
  Показать код JS
  
    
       document.addEventListener("DOMContentLoaded", function () {
    const content = document.querySelector(".content");
    const tooltip = document.getElementById("tooltip");
 
    content.addEventListener("selectstart", function (event) {
        const target = event.target;
 
        // Разрешить выделение кода
        if (target.tagName.toLowerCase() === "code") {
            return;
        }
 
        event.preventDefault();
 
        // Показать подсказку
        const rect = target.getBoundingClientRect();
        tooltip.style.left = `${event.pageX}px`;
        tooltip.style.top = `${event.pageY - 30}px`;
        tooltip.classList.add("show");
 
        // Скрыть подсказку через 2 секунды
        setTimeout(() => {
            tooltip.classList.remove("show");
        }, 2000);
    });
});
 
/* Автор кода SATAMAX.RU [https://satamax.ru] */