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

Содержание

1 CSS-способ
2 JQuery способ
3 Предотвратить функцию копирования

Независимо от причины, по которой вы хотите предотвратить выделение текста в документе, эта задача может быть легко решена с помощью любого 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);

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

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

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

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

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

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

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

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

Повеселись !