Как отключить копирование текста в мобильной версии сайта

Актуально на 2025 год

Просмотры: 138

В этой короткой заметке покажу, как отключить копирование текста в мобильной версии сайта. Читатель при просмотре поста не сможет выделить текст или его часть и скопировать к себе на устройство.

Есть плагины, которые прекрасно справляются с такой задачей, как отключение правой клавиши мышки и копирования текста. Например, плагин WP Hide & Security Enhancer. Однако, в нём нет возможности отключить Copy при просмотре наших прекрасных постов на мобильных устройствах.

Сейчас мы эту неприятность устраним при помощи нескольких строчек кода на CSS. Для того, чтобы запретить выделение и копирование текста на вашем сайте в мобильной версии, вы можете использовать CSS свойство user-select и установить его значение в none для нужных элементов. Например, если вы хотите запретить выделение и копирование текста внутри элемента с классом «no-select», то вам нужно добавить следующий CSS код:

.no-select {
  -webkit-user-select: none; /* для Safari */
  -moz-user-select: none; /* для Firefox */
  -ms-user-select: none; /* для IE 10 и более поздних версий */
  user-select: none; /* стандартное свойство */
}

.no-select {

-webkit-user-select: none; /* для Safari */

-moz-user-select: none; /* для Firefox */

-ms-user-select: none; /* для IE 10 и более поздних версий */

user-select: none; /* стандартное свойство */

}

Этот код запретит выделение и копирование текста внутри элемента с классом «no-select» во всех поддерживаемых браузерах. Вы можете изменить класс и применить это свойство к другим элементам на вашем сайте, если это необходимо.

На сайте, работающем под управлением WordPress, редактировать надо файл style.css рабочей темы. Лучше, конечно, использовать дочернюю тему сайта, чтобы при обновлении родительской темы не слетели правки.