Как отключить выделение текста в документе с помощью CSS и jQuery

Независимо от причины, по которой вы хотите предотвратить выделение текста в документе, эта задача может быть легко решена с помощью любого CSS или Javascript.

CSS-способ

CSS позволяют легко предотвратить выделение с помощью user-select править. Текст элемента и вложенных элементов не сможет быть выбран действием пользователя. Выбор можно повторно включить для подэлементов, используя user-select:text, Следующий класс disable-select содержит user-select Правило со всеми доступными префиксами в каждом браузере:

.disable-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none;   /* Chrome/Safari/Opera */
-khtml-user-select: none;    /* Konqueror */
-moz-user-select: none;      /* Firefox */
-ms-user-select: none;       /* Internet Explorer/Edge */
user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

Затем добавьте класс к любому элементу, в котором вы хотите запретить выделение текста:

Hello, this text cannot by copied by the user action.

JQuery способ

Метод jQuery начнется с добавления атрибута unselectable к вашему элементу DOM. Атрибут unselectable (только в Internet Explorer) указывает, что элемент не может быть выбран пользователем. Затем мы усилим предотвращение выбора элемента не только с помощью Javascript, но и CSS. Вторая инструкция добавит user-select:none; Инструкция css к элементу, и он будет недоступен для выбора, если Javascript недоступен ( user-select правило доступно от IE9 до более новых версий).

Наконец, мы собираемся добавить selectstart а также dragstart слушатель отклоняет это событие, возвращая ложь, и вы готовы к работе!

(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart dragstart', false);
};
})(jQuery);

В качестве альтернативы, вместо создания метода jQuery, вы можете выбрать элемент DOM и применить инструкции (те же инструкции, которые были описаны ранее) напрямую.

var element = $("#element");
element.attr('unselectable', 'on').css('user-select', 'none').on('selectstart dragstart', false);

Предотвратить функцию копирования

Если вам нужно только запретить выделение текста элементом, чтобы пользователь не допустил ошибок при использовании вашего приложения, тогда достаточно одного из предыдущих решений.

Читайте также:  Как получить каждый экземпляр сущности поля EntityType с помощью Twig внутри формы Symfony 3

Однако, если основная цель этой задачи для вас состоит в том, чтобы предотвратить извлечение текста (функция копирования текста), обычное действие для любого пользователя на веб-сайте, вы можете отключить это событие в документе, добавив следующие атрибуты в свой HTML-код. документ (в основном oncopy а также oncut):

Или используя jQuery, чтобы предотвратить выполнение событий:

$('body').on('copy',function(e) {
e.preventDefault();
return false;
});

Но вы должны знать, что невозможно каким-либо образом предотвратить извлечение текста из вашего документа (100% безопасность)., поскольку есть много способов получить содержимое веб-сайта, то есть консоль разработчика в браузере:

Скопируйте контент jQuery и css

Кроме того, чтобы сделать извлечение текста более сложным, вы можете вместо предоставления текста в вашем документе предоставить изображение вашего контента.

Это сделает текст не подлежащим копированию. Тем не менее, ваш контент также не защищен от копирования, так как кто-то может использовать OCR (оптическое распознавание символов) для извлечения текста из изображений.

Повеселись !

Ссылка на основную публикацию
Adblock
detector